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.
Hire Our Worthy Web Developers
Explore the Benefits of Our Web
Development Services
Get Expert AssistanceYou may also like
What is Web 4.0? The Internet of Business Possibilities
What is Web 4.0? The new generation of the Web will explore innovative possibilities for every indus...
What is a React Query? Exploring and Understanding it by Basics| Part – 1
React query gives us more powerful features like caching, pa...
What’s New in Laravel 10? : Let’s Have A Quick Look At New Features
Laravel is one of the most famous and extensively employed f...
