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.
Development ServicesGet Expert Assistance
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
