Vite est un outil de build frontend moderne qui fournit un environnement de developpement extremement rapide et bundle votre code pour la production. Lors de la construction d'applications avec Laravel, Vite est generalement utilise pour bundler les fichiers CSS et JavaScript de votre application en assets prets pour la production. Laravel s'integre parfaitement avec Vite en fournissant un plugin officiel et une directive Blade pour charger vos assets en developpement et en production.

Installation et Configuration

Pour commencer avec Vite dans une nouvelle installation Laravel, assurez-vous que Node.js (16+) et NPM sont installes:

node -v
npm -v

Vous pouvez installer Node et NPM depuis le site officiel de Node. Alternativement, si vous utilisez Laravel Sail, vous pouvez invoquer Node et NPM via Sail:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

Ensuite, installez Vite et le plugin Laravel. Le fichier package.json par defaut dans une nouvelle installation Laravel inclut tout ce dont vous avez besoin pour commencer avec Vite. Installez les dependances frontend de votre application via NPM:

npm install

Configurer Vite

Vite est configure via un fichier vite.config.js a la racine de votre projet. Personnalisez ce fichier selon vos besoins. Le plugin Laravel Vite necessite que vous specifiiez les points d'entree de votre application:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
  plugins: [
    laravel([
      'resources/css/app.css',
      'resources/js/app.js',
    ]),
  ],
});

Charger les Scripts et Styles

Ajoutez la directive @vite dans votre template Blade pour charger les assets:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Application</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <!-- Contenu -->
    </div>
</body>
</html>

Executer Vite

Pour lancer le serveur de developpement Vite:

npm run dev

Pour builder les assets pour la production:

npm run build

Travailler avec Vue ou React

Laravel et Vite supportent Vue et React. Pour configurer Vue:

npm install vue @vitejs/plugin-vue

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,
        },
      },
    }),
  ],
});

En savoir plus sur le bundling d'assets dans Laravel depuis la documentation officielle.

Conclusion

Vite fournit un moyen rapide et efficace de gerer les assets frontend dans Laravel 11. Avec le remplacement de modules a chaud et un build de production optimise, Vite ameliore considerablement l'experience de developpement.

Bon codage avec Laravel 11!

10 Les Bases de Laravel 11 : Bundling d'Assets

Installation et Configuration

Configurer Vite

Charger les Scripts et Styles

Executer Vite

Travailler avec Vue ou React

Conclusion

Discutez de votre projet avec nous

Articles connexes

Demarrer avec Laravel 11 : Installation, Configuration et Structure des Repertoires

9 Les Bases de Laravel 11 : Templates Blade

11 Les Bases de Laravel 11 : Gestion des Erreurs