Vite is now the default frontend asset bundler for Laravel applications

News

June 29th, 2022

Vite is now the default frontend asset bundler for Laravel applications

The Laravel team has been working hard on a Vite integration for Laravel. As of this week, Vite is now the default frontend asset bundler in new Laravel projects with updates to Breeze and Jetstream as well:

Taylor Otwell shared the fastest way to try out Vite on a new project if you want to get a demo of how fast Vite bundles assets:

1laravel new breeze-test --git
2cd breeze-test
3composer require laravel/breeze
4php artisan breeze:install vue
5npm install
6npm run dev

Using Laravel Breeze is the recommended way to get started with Vite as it provides frontend and backend authentication scaffolding and tools such as Tailwind, Inertia, and Vite.

Running the above code should end with Vite building dev assets and waiting for changes in the foreground of your terminal:

Vite build output

The main app.blade.php layout will now have a @vite directive and renders the following HTML during development:

1<script type="module" src="http://127.0.0.1:3000/@vite/client"></script>
2<script type="module" src="http://127.0.0.1:3000/resources/js/app.js"></script>

As you make changes to your Vue files, you will see output similar to the following, indicating updated builds.

19:41:12 PM [vite] hmr update /resources/js/Pages/Auth/Login.vue
2hmr update /resources/css/app.css (x4)

The HMR output is "hot module replacement," which provides near-instantaneous build times during development. These updates were so fast that I couldn't believe it at first, which helps you get into a productive flow as you make frontend changes. You'll see updates automatically happen in the browser while you work, which is a fantastic experience!

Along with the Vite update, the Laravel docs have a Frontend documentation page, giving you a complete overview of all your frontend options with Laravel applications.

Making Vite the default is a huge accomplishment and step to move Laravel forward. Congratulations to all those involved!

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.