22nd Jul 2022

Using Vite in Laravel


Written By, Akshay Shah


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

Step5:- npm run dev
Step6:- In order to use HMR for blade file replace this code in your “vite.config.js” (Optional)

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 Assistance

Written By,

Web developer at Yudiz Solutions Ltd