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

ActiveLibrary

astral-php/astral-vite
======================

Intégration Vite.js + Tailwind CSS pour Astral MVC — assets modernes, HMR instantané, build optimisé

1.1.0(today)00MITPHPPHP ^8.0

Since Apr 3Pushed todayCompare

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

READMEChangelogDependencies (1)Versions (2)Used By (0)

astral-vite ⚡
=============

[](#astral-vite-)

[![PHP](https://camo.githubusercontent.com/efc33820eea622b7119e4e8f304c3622be923425eb8ee1d34c7b42dbe2c2e847/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e302532422d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://www.php.net)[![Vite](https://camo.githubusercontent.com/df8f0b3e3398edb8bce3aa8cdbbec81042c41912be97a7980a3e9073c0e986a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f566974652d352e782d3634364346463f6c6f676f3d76697465266c6f676f436f6c6f723d7768697465)](https://vitejs.dev)[![Tailwind CSS](https://camo.githubusercontent.com/c95924bf3b04e9cd458ed84dc0a2c8dd89bebff157db3e2d1f05fcd0850e91ec/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5461696c77696e645f4353532d76342d3036423644343f6c6f676f3d7461696c77696e64637373266c6f676f436f6c6f723d7768697465)](https://tailwindcss.com)[![License: MIT](https://camo.githubusercontent.com/784362b26e4b3546254f1893e778ba64616e362bd6ac791991d2c9e880a3a64e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e2e737667)](./LICENSE)[![Version](https://camo.githubusercontent.com/4f7e0d0b2eb3de8c977c19f21c7250bee9dcbaef07d742736035565ed3a1f2e6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d626c7565)](./CHANGELOG.md)

Intégration optionnelle de **[Vite.js](https://vitejs.dev)** et **[Tailwind CSS v4](https://tailwindcss.com)** pour [Astral MVC](https://github.com/astral-php/astral).

- ⚡ **Démarrage dev < 300ms** — ESM natif, aucun bundling à froid
- 🔥 **HMR instantané** — CSS et JS mis à jour sans rechargement de page
- 📦 **Build production optimisé** — tree-shaking Rollup, fichiers hashés
- 🎨 **Tailwind CSS v4** — plugin officiel Vite, zéro config PostCSS
- 🔌 **Intégration en 4 étapes** — un `ServiceProvider`, une variable `$vite`

---

Sommaire
--------

[](#sommaire)

- [Prérequis](#pr%C3%A9requis)
- [Installation](#installation)
    - [1. Installer le package via Composer](#1-installer-le-package-via-composer)
    - [2. Enregistrer le ServiceProvider](#2-enregistrer-le-serviceprovider)
    - [3. Configurer le front-end](#3-configurer-le-front-end)
    - [4. Utiliser $vite dans le layout](#4-utiliser-vite-dans-le-layout)
- [Utilisation quotidienne](#utilisation-quotidienne)
    - [Développement](#d%C3%A9veloppement)
    - [Production](#production)
- [API de ViteAssets](#api-de-viteassets)
- [Variables d'environnement](#variables-denvironnement)
- [Stubs fournis](#stubs-fournis)
- [Comment ça fonctionne](#comment-%C3%A7a-fonctionne)
- [Ajouter Vue 3 ou React](#ajouter-vue-3-ou-react)
- [Structure du projet après installation](#structure-du-projet-apr%C3%A8s-installation)
- [Licence](#licence)

---

Prérequis
---------

[](#prérequis)

OutilVersion minimalePHP8.0+Astral MVC1.1+Node.js18+npm9+---

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

[](#installation)

### 1. Installer le package via Composer

[](#1-installer-le-package-via-composer)

```
composer require astral-php/astral-vite
```

---

### 2. Enregistrer le ServiceProvider

[](#2-enregistrer-le-serviceprovider)

Ouvrir `config/dependencies.php` et ajouter `ViteServiceProvider` **après** `FrameworkServiceProvider` :

```
// config/dependencies.php

use Core\Providers\FrameworkServiceProvider;
use Core\Providers\DatabaseServiceProvider;
use AstralVite\ViteServiceProvider;          // ← importer
use App\Providers\AppServiceProvider;

return [
    FrameworkServiceProvider::class,
    DatabaseServiceProvider::class,
    ViteServiceProvider::class,              // ← ajouter ici
    AppServiceProvider::class,
];
```

> **Pourquoi après `FrameworkServiceProvider` ?**`ViteServiceProvider` appelle `View::share('vite', ...)`. La classe `View` est instanciée par `FrameworkServiceProvider` — elle doit donc être enregistrée en premier.

---

### 3. Configurer le front-end

[](#3-configurer-le-front-end)

#### a) Copier les stubs

[](#a-copier-les-stubs)

Le dossier `vendor/astral-php/astral-vite/stubs/` contient tous les fichiers prêts à l'emploi. Copiez-les à la racine de votre projet :

```
# Config Vite + npm
cp vendor/astral-php/astral-vite/stubs/vite.config.js .
cp vendor/astral-php/astral-vite/stubs/package.json   .

# Sources front-end
cp -r vendor/astral-php/astral-vite/stubs/resources .

# Layout PHP (adapter selon votre layout existant)
cp vendor/astral-php/astral-vite/stubs/views/layouts/app.php views/layout/
```

#### b) Installer les dépendances npm

[](#b-installer-les-dépendances-npm)

```
npm install
```

Cela installe : `vite`, `tailwindcss`, `@tailwindcss/vite`.

#### c) Variables .env (optionnel)

[](#c-variables-env-optionnel)

Les valeurs par défaut conviennent pour la plupart des projets. Pour personnaliser, ajouter dans `.env` :

```
# Défauts — à modifier seulement si nécessaire
VITE_DEV_SERVER=http://localhost:5173
VITE_BUILD_DIR=/build
```

---

### 4. Utiliser $vite dans le layout

[](#4-utiliser-vite-dans-le-layout)

`$vite` est **automatiquement disponible dans toutes les vues** (partagé via `View::share()`). Tu as deux options :

#### Option 1 — Modifier ton layout existant (`views/layout/main.php`)

[](#option-1--modifier-ton-layout-existant-viewslayoutmainphp)

- Supprimer l'import Tailwind CDN (si présent)
- Ajouter l'appel à `$vite->tags()` dans le `` :

```