nongbit/codeigniter-vite

Vite integration for CodeIgniter 4 with multi‑entry support.

1.0.3 2026-05-13 11:10 UTC

Requires

• php: ^7.4 || ^8.0
• codeigniter4/framework: ^4.4

MIT

README

Vite integration for CodeIgniter 4 with multi‑entry point support.

Requirements

• PHP 7.4 or 8.0+
• CodeIgniter 4.4+
• Composer
• Node.js 18+ and npm

Installation

composer require nongbit/codeigniter-vite

Setup

1. Run setup command

php spark vite:setup

Use --force to overwrite existing files.

This copies:

• app/Config/Vite.php
• package.json and vite.config.js to your project root
• Example assets to app/Views/assets/js/app.js and app/Views/assets/css/app.css

2. Install Node dependencies

npm install

3. Start Vite dev server

npm run dev

Usage

In your view, simply call:

<?= vite() ?>

This uses the default entry point (configured as defaultEntry in app/Config/Vite.php, which defaults to app).

For other entry points:

<?= vite('admin') ?>

• If the Vite dev server is running, it outputs hot-reload tags.
• Otherwise, it looks for the production manifest (supports Vite 4 & 5 manifest locations). If found, it outputs the bundled <script> and <link> tags. If no manifest is found, it outputs nothing (safe for production).

Multi‑entry points

Add a new entry point (e.g., for admin section):

php spark vite:make-entry admin

Use --force to overwrite existing assets for that entry.

Each entry point will have its own assets in app/Views/{entry}/assets/.

Configuration

Edit app/Config/Vite.php:

<?php

namespace Config;

use CodeIgniter\Config\BaseConfig;

class Vite extends BaseConfig
{
    public string $publicPath = FCPATH;
    public string $buildDirectory = '';
    public string $devServerUrl = '';
    public string $defaultEntry = 'app';
}

• publicPath: Absolute path to the public directory (default FCPATH). Usually correct.
• buildDirectory: Subdirectory inside publicPath where Vite builds assets. Empty means directly inside public/. Set to dist if your Vite outDir is public/dist.
• devServerUrl: Manual Vite dev server URL. Leave empty for auto-detection on http://localhost:5173. Useful for Docker (http://host.docker.internal:5173) or custom setups.
• defaultEntry: Name of the default entry point used when calling vite() without arguments.

Production

npm run build

The helper will automatically switch to using the production manifest.

BONUS (using Tailwind CSS)

Install tailwindcss and @tailwindcss/vite via npm.

npm install tailwindcss @tailwindcss/vite

Then add the @tailwindcss/vite plugin to your Vite configuration.

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

Add an @import to your app.css.

@import "tailwindcss";

License

MIT