> ## Documentation Index > Fetch the complete documentation index at: https://kawax.biz/llms.txt > Use this file to discover all available pages before exploring further. # Bundling des assets avec Vite > Bundler JS et CSS avec Vite dans un projet Laravel et disposer d'un rechargement à chaud pour un développement confortable. ## Laravel et Vite [Vite](https://vitejs.dev) est un outil de build frontend rapide. En développement, il propose du Hot Module Replacement (HMR) qui applique instantanément les changements de fichiers ; en production, il génère des assets optimisés. Depuis Laravel 9, Vite est l'outil de build officiel, intégré à Laravel via `laravel-vite-plugin`. Ce plugin : * gère les points d'entrée ; * fournit le HMR pendant le développement ; * s'intègre à la directive Blade `@vite()` ; * gère la versioning des assets en production (cache-busting). Avec un kit de démarrage (Laravel Breeze, etc.), la configuration Vite + Tailwind est déjà en place. Cette page décrit la configuration à partir de zéro. Pour situer Vite dans l'architecture frontend Laravel, consultez d'abord [Frontend](/fr/frontend). ## Installation et configuration ### Vérifier Node Node.js 16+ et npm sont requis. ```shell theme={null} node -v npm -v ``` ### Installer les paquets Un projet Laravel neuf a déjà `vite` et `laravel-vite-plugin` dans `package.json`. Installez : ```shell theme={null} npm install ``` ### `vite.config.js` Le fichier est présent à la racine. Spécifiez vos points d'entrée. ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), ], }); ``` Pour un SPA / Inertia, il est conseillé d'importer le CSS depuis le JS. Retirez `resources/css/app.css` de la liste et ajoutez `import '../css/app.css';` en tête de `resources/js/app.js`. ## Démarrer le serveur de dev En dev, `npm run dev` lance le serveur Vite. Les modifications se rechargent automatiquement (HMR). ```shell theme={null} npm run dev ``` Lancez aussi le serveur Laravel avec `composer run dev`. ```shell theme={null} composer run dev ``` `composer run dev` démarre `php artisan serve` et `npm run dev` en parallèle. ### Rechargement automatique des vues Blade `refresh: true` recharge automatiquement le navigateur lorsque vous sauvegardez une vue Blade ou un fichier de route. ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: true, }), ], }); ``` Répertoires surveillés avec `refresh: true` : * `resources/views/**` * `app/Livewire/**` * `routes/**` * `lang/**` ## Build de production Avant le déploiement, lancez `npm run build`. Les assets sont bundlés et versionnés dans `public/build/`. ```shell theme={null} npm run build ``` Structure typique : ```text theme={null} public/ build/ assets/ app-Cv82Mlke.css app-DnAZBF4U.js manifest.json ``` `manifest.json` fait la correspondance nom → hash ; `@vite()` s'en sert pour charger les bons fichiers. Ajoutez `public/build/` à `.gitignore`. Buildez à la volée sur le serveur ou via CI. ## Charger les assets depuis Blade Ajoutez `@vite()` dans le `` de votre layout. ```blade theme={null} {{ config('app.name') }} @vite(['resources/css/app.css', 'resources/js/app.js']) @yield('content') ``` Si le CSS est importé depuis le JS, ne référencez que l'entrée JavaScript. ```blade theme={null} @vite('resources/js/app.js') ``` La directive `@vite()` change de comportement selon l'environnement. | Contexte | Comportement | | -------------------- | ------------------------------------- | | Serveur de dev actif | Charge depuis Vite, HMR activé | | Production (build) | Consulte `public/build/manifest.json` | ## Points d'entrée JS / CSS ### JavaScript `resources/js/app.js` est le point d'entrée principal ; importez-y les autres modules. ```js theme={null} import './bootstrap'; import '../css/app.css'; // Modules maison import './components/modal'; import './utils/format'; ``` ### CSS Placez les styles globaux dans `resources/css/app.css`. ```css theme={null} /* Tailwind CSS */ @import 'tailwindcss'; /* Styles personnalisés */ body { font-family: 'Inter', sans-serif; } ``` ### Plusieurs points d'entrée Pour un back-office avec ses propres assets : ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', 'resources/css/admin.css', 'resources/js/admin.js', ]), ], }); ``` Dans les layouts Blade, chargez seulement le bon point d'entrée. ```blade theme={null} {{-- Layout admin --}} @vite(['resources/css/admin.css', 'resources/js/admin.js']) ``` ## Intégration Tailwind CSS Tailwind v4 s'intègre via un plugin Vite. ```shell theme={null} npm install tailwindcss @tailwindcss/vite ``` ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ tailwindcss(), laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), ], }); ``` ```css theme={null} /* resources/css/app.css */ @import 'tailwindcss'; ``` Tailwind v3 nécessitait `tailwind.config.js` et `postcss.config.js`. Tailwind v4 n'en a plus besoin. ## Alias `laravel-vite-plugin` configure automatiquement l'alias `@` vers `resources/js`. ```js theme={null} import UserCard from '@/components/UserCard.vue'; // équivaut à import UserCard from '/resources/js/components/UserCard.vue'; ``` Alias personnalisés via `resolve.alias` : ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import path from 'path'; export default defineConfig({ plugins: [ laravel(['resources/js/app.js']), ], resolve: { alias: { '@': '/resources/js', '@css': '/resources/css', '@images': '/resources/images', }, }, }); ``` Exemple : ```js theme={null} import logo from '@images/logo.png'; import '@css/custom.css'; ``` ## Configurations par framework ### Vue ```shell theme={null} npm install --save-dev @vitejs/plugin-vue ``` ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ laravel(['resources/js/app.js']), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], }); ``` ### React ```shell theme={null} npm install --save-dev @vitejs/plugin-react ``` ```js theme={null} import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ laravel(['resources/js/app.jsx']), react(), ], }); ``` Ajoutez `@viteReactRefresh` avant `@vite` dans le template Blade. ```blade theme={null} @viteReactRefresh @vite('resources/js/app.jsx') ``` ## Assets statiques Les images et polices référencées depuis Blade peuvent aussi être versionnées. Précisez les répertoires via `assets`. ```js theme={null} laravel({ input: 'resources/js/app.js', assets: ['resources/images/**', 'resources/fonts/**'], }) ``` Récupérez l'URL versionnée avec `Vite::asset()`. ```blade theme={null}

``` ## Récapitulatif | Objectif | Méthode | | ------------------------------ | --------------------------------------------------------- | | Serveur de dev | `npm run dev` | | Build de production | `npm run build` | | Charger les assets | `@vite(['resources/css/app.css', 'resources/js/app.js'])` | | Auto-reload sur Blade | `refresh: true` dans `vite.config.js` | | Tailwind CSS | plugin `@tailwindcss/vite` | | Alias `@` | vers `resources/js` par défaut | | Versioner des assets statiques | Option `assets` et `Vite::asset()` | ## Prochaines étapes Améliorez encore les performances de votre application grâce au cache Laravel. ## Related topics - [Frontend](/fr/frontend.md) - [Construire une SPA avec Inertia.js](/fr/blog/inertia-introduction.md) - [Introduction à Svelte — bases pour l'utiliser avec Inertia × Laravel](/fr/blog/svelte-introduction.md) - [⚡Introduction à Livewire 4 — créer des UI réactives sans JavaScript](/fr/blog/livewire-introduction.md) - [Connaissances requises avant de commencer avec Laravel](/fr/true-tutorial.md)