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!



Source link

Share

Leave a Reply

Your email address will not be published. Required fields are marked *