PHPackages                             cleup/vite-php - 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. cleup/vite-php

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

cleup/vite-php
==============

Integrating Vite into your project

v1.0.1(2y ago)134MITPHPPHP >=8.1

Since Jan 22Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/cleup/vite-php)[ Packagist](https://packagist.org/packages/cleup/vite-php)[ Docs](https://github.com/cleup/vite-php)[ RSS](/packages/cleup-vite-php/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Cleup Vite integration
======================

[](#cleup-vite-integration)

Library for using Vite in your `php` or `Cleup` project

#### Installation

[](#installation)

1. Install the `cleup/vite-php` library using composer:

```
composer require cleup/vite-php

```

2. Create a `Vite` project ():

```
npm create vite@latest

```

3. Install the `cleup/vite-plugin` plugin ():

```
npm i cleup/vite-plugin

```

#### Usage

[](#usage)

Configure `vite.config.js`:

```
// vite.config.js
import { defineConfig } from "vite";
import cleup from "cleup-vite-plugin";

export default defineConfig({
    plugins: [
        cleup([
            "assets/js/app.js"
        ])
    ],
});
```

Create a new instance of the Vite class in a convenient location:

```
// header.php
use Cleup\Foundation\Vite;

$vite = new Vite([
    /*
       Force development mode.
       By default, this parameter will change automatically depending on the state of the development server.
    */
    'dev' => false,

    /*
        The build directory (default: 'build')
    */
    'buildDir' => 'build',
]);
```

Put the `use` method inside the `head` tag of your document:

```

    ...