PHPackages                             trianayulianto/vite-codeigniter-4 - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. trianayulianto/vite-codeigniter-4

ActiveLibrary[Utility & Helpers](/categories/utility)

trianayulianto/vite-codeigniter-4
=================================

Vite backend integration for CodeIgniter 4

v0.1.0(3y ago)034↓100%MITPHPPHP ^8.0

Since Dec 28Pushed 3y ago1 watchersCompare

[ Source](https://github.com/trianayulianto/vite-codeigniter-4)[ Packagist](https://packagist.org/packages/trianayulianto/vite-codeigniter-4)[ RSS](/packages/trianayulianto-vite-codeigniter-4/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

Vite Backend Integration for CodeIgniter 4
==========================================

[](#vite-backend-integration-for-codeigniter-4)

Introduction
------------

[](#introduction)

[Vite](https://vitejs.dev/) is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. This is backend integration for CodeIgniter 4 to load your assets for development and production.

Installation
------------

[](#installation)

### ThirdParty

[](#thirdparty)

You can install it's as **ThirdParty**:

```
cd app/ThirdParty

git clone https://github.com/trianayulianto/vite-codeigniter-4.git
```

Set autoload in `app/Config/Autoload.php`

```
public $psr4 = [
    // others
    'Inertia'     => APPPATH . 'ThirdParty/vite-codeigniter-4/src'
];
```

Usage
-----

[](#usage)

### Install Vite and the Laravel Plugin

[](#install-vite-and-the-laravel-plugin)

First, you will need to install [Vite](https://vitejs.dev/) using your npm package manager of choice:

```
npm install --save-dev vite
```

You may also need to install additional Vite plugins for your project, such as the Vue or React plugins:

```
npm install --save-dev @vitejs/plugin-vue
```

```
npm install --save-dev @vitejs/plugin-react
```

### Configure Vite

[](#configure-vite)

Thanks to Laravel, configuring Vite has become easier with their plugin. See [Laravel Vite Plugin](https://www.npmjs.com/package/laravel-vite-plugin).

```
npm install --save-dev laravel-vite-plugin
```

Update environment variables

```
APP_URL="http://localhost:8000"

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

```

Create a `vite.config.js` file in the root of your project:

```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '@vitejs/plugin-react';
// import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        // react(),
        // vue({
        //     template: {
        //         transformAssetUrls: {
        //             base: null,
        //             includeAbsolute: false,
        //         },
        //     },
        // }),
    ],
});
```

If you are building an **SPA**, you will get a better developer experience by removing the CSS entry point above and **importing your CSS from Javascript**.

### Loading Your Scripts And Styles

[](#loading-your-scripts-and-styles)

With your Vite entry points configured, you only need reference them in a `vite()` hepler that you add to the `` of your application's root template:

```
...