> ## Documentation Index > Fetch the complete documentation index at: https://kawax.biz/llms.txt > Use this file to discover all available pages before exploring further. # Bundle degli asset con Vite > Come creare bundle di JavaScript e CSS con Vite in un progetto Laravel e avere un ambiente di sviluppo confortevole con hot reload. ## Laravel e Vite [Vite](https://vitejs.dev) è un tool di build frontend veloce. In sviluppo offre HMR (Hot Module Replacement), in produzione asset ottimizzati. Da Laravel 9 Vite è lo strumento di build frontend standard, integrato tramite `laravel-vite-plugin`. Il plugin si occupa di: * Gestione degli entry point * HMR nel dev server * Integrazione con la direttiva `@vite()` di Blade * Versioning degli asset in build (cache busting) Se usi uno starter kit di Laravel, Vite e Tailwind sono già configurati. Qui vediamo come farlo da zero. Per il ruolo di Vite nell'intera configurazione frontend consulta prima [Frontend](/it/frontend). ## Installazione e configurazione ### Verifica di Node Servono Node.js (16+) e npm. ```shell theme={null} node -v npm -v ``` ### Installazione dei pacchetti Nei progetti nuovi `package.json` include già `vite` e `laravel-vite-plugin`. ```shell theme={null} npm install ``` ### vite.config.js Nella root trovi `vite.config.js` con gli entry point. ```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', ]), ], }); ``` In SPA/Inertia si consiglia di importare il CSS da JavaScript: togli `resources/css/app.css` dagli entry point e in `resources/js/app.js` aggiungi `import '../css/app.css';`. ## Server di sviluppo In sviluppo `npm run dev`. Salvando i file, il browser si aggiorna (HMR). ```shell theme={null} npm run dev ``` Insieme al server Laravel: ```shell theme={null} composer run dev ``` `composer run dev` avvia insieme `php artisan serve` e `npm run dev`. ### Reload automatico delle viste Blade Con `refresh: true` il browser si ricarica quando salvi Blade o 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, }), ], }); ``` Monitorate: * `resources/views/**` * `app/Livewire/**` * `routes/**` * `lang/**` ## Build di produzione Prima del deploy esegui `npm run build`. ```shell theme={null} npm run build ``` Output in `public/build/`: ```text theme={null} public/ build/ assets/ app-Cv82Mlke.css app-DnAZBF4U.js manifest.json ``` `manifest.json` mappa nomi e hash: `@vite()` lo consulta. Aggiungi `public/build/` a `.gitignore`. Fai il build a destinazione o in CI. ## Caricamento asset da Blade Aggiungi `@vite()` nel ``. ```blade theme={null} {{ config('app.name') }} @vite(['resources/css/app.css', 'resources/js/app.js']) @yield('content') ``` Se importi il CSS da JS, indica solo il JS. ```blade theme={null} @vite('resources/js/app.js') ``` `@vite()` cambia comportamento tra sviluppo e produzione. | Situazione | Comportamento | | ------------------ | -------------------------------------------- | | Dev server attivo | Carica dal dev server con HMR | | Produzione (build) | Consulta `manifest.json` e carica versionato | ## Entry point JavaScript e CSS ### JavaScript `resources/js/app.js` è l'entry principale. ```js theme={null} import './bootstrap'; import '../css/app.css'; // Moduli personali import './components/modal'; import './utils/format'; ``` ### CSS ```css theme={null} /* Con Tailwind */ @import 'tailwindcss'; /* Custom */ body { font-family: 'Inter', sans-serif; } ``` ### Più entry point Per admin ecc.: ```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', ]), ], }); ``` In Blade: ```blade theme={null} @vite(['resources/css/admin.css', 'resources/js/admin.js']) ``` ## Integrazione con Tailwind CSS Tailwind v4+ è integrato via 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} @import 'tailwindcss'; ``` Con Tailwind v3 servono `tailwind.config.js` e `postcss.config.js`. Non richiesti in v4. ## Alias Il plugin imposta l'alias `@` su `resources/js`. ```js theme={null} import UserCard from '@/components/UserCard.vue'; ``` Alias personali: ```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', }, }, }); ``` ```js theme={null} import logo from '@images/logo.png'; import '@css/custom.css'; ``` ## Impostazioni per 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(), ], }); ``` Con React aggiungi `@viteReactRefresh` prima di `@vite`. ```blade theme={null} @viteReactRefresh @vite('resources/js/app.jsx') ``` ## Asset statici Con l'opzione `assets` gestisci il versioning di immagini e font referenziati da Blade. ```js theme={null} laravel({ input: 'resources/js/app.js', assets: ['resources/images/**', 'resources/fonts/**'], }) ``` In Blade usa `Vite::asset()`. ```blade theme={null}

``` ## Riepilogo | Obiettivo | Metodo | | ------------------------ | ----------------------------------- | | Avviare dev server | `npm run dev` | | Build produzione | `npm run build` | | Caricare asset da Blade | `@vite([...])` | | Auto reload delle viste | `refresh: true` in `vite.config.js` | | Usare Tailwind | Plugin `@tailwindcss/vite` | | Alias `@` | `resources/js` | | Versionare asset statici | Opzione `assets` + `Vite::asset()` | ## Prossimi passi Migliora ulteriormente le prestazioni con la cache di Laravel. ## Related topics - [Frontend](/it/frontend.md) - [Includere Copilot CLI nel bundle](/it/packages/laravel-copilot-sdk/bundle-cli.md) - [Generazione degli URL](/it/urls.md) - [Gestione degli errori](/it/error-handling.md) - [Laravel Maestro — l'orchestratore per lo sviluppo degli starter kit](/it/blog/maestro-introduction.md)