Overview
Vite or Laravel Vite is a new default frontend bundler for Laravel (from version 9.19), replacing the webpack to create production bundles at lightning speed.
Why to use Vite?
- Performance Improvements:- Vite is very very fast in terms of starting a new dev server, bundling assets, and updating them compared to webpack.
- Advancements in the ecosystem:- Vite leveraging new advancements in the ecosystem, like the availability of native ES modules in the browser. See full detailed explanation on Vite official docs.
- HMR for blade files:- One of Vite’s most prominent features is Hot Module Replacement for Vue.js and React. But recently Freek and Spatie got a working solution for blade files, so you can use HMR on blade files as well.
Installing new Laravel Project with Vite
If you are using a new project of laravel >= 9.19 then vite is now the default bundler, everything is ready to use for you.
Below steps help to create new project with Vite.
Step1:- laravel new project_name
Step2:- cd project_name
Step3:- npm install
Step4:- Add @vite() directive to your layout file before end of head tags
<head> … @vite(['resources/css/app.css', 'resources/js/app.js']) </head> or you can use them separately <head> … @vite('resources/css/app.css') </head> <body> ... @vite('resources/css/app.js') </body>
Step5:- npm run dev
Step6:- In order to use HMR for blade file replace this code in your “vite.config.js” (Optional)
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), { name: 'blade', handleHotUpdate({ file, server }) { if (file.endsWith('.blade.php')) { server.ws.send({ type: 'full-reload', path: '*', }); } }, } ], });
That’s it now you can run your application using app_url visible on CLI.
NOTE: If you are using windows then create vhost or if you are using mac then you can use valet.
For more customization and information check out the laravel docs.