10 Laravel 11 Basics: Asset Bundling

Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. When building applications with Laravel, Vite is typically used to bundle your application's CSS and JavaScript files into production-ready assets. Laravel integrates seamlessly with Vite by providing an official plugin and Blade directive to load your assets for development and production.

Installation & Setup

To get started with Vite in a fresh Laravel installation, ensure that Node.js (16+) and NPM are installed:

node -v
npm -v

You can install Node and NPM from the official Node website. Alternatively, if you're using Laravel Sail, you can invoke Node and NPM through Sail:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

Next, install Vite and the Laravel plugin. The default package.json file in a new Laravel installation includes everything you need to get started with Vite. Install your application's frontend dependencies via NPM:

npm install

Configuring Vite

Vite is configured via a vite.config.js file in the root of your project. Customize this file based on your needs. The Laravel Vite plugin requires you to specify the entry points for your application:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
  plugins: [
    laravel([
      'resources/css/app.css',
      'resources/js/app.js',
    ]),
  ],
});

If you are building a Single Page Application (SPA) or using Inertia, import your CSS via JavaScript instead of specifying CSS entry points:

import './bootstrap';
import '../css/app.css';

Running Vite

There are two ways to run Vite: the development server and the build command. The development server is useful for local development and reflects file changes instantly in the browser. The build command versions and bundles your assets for production:

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

Loading Your Scripts and Styles

With your Vite entry points configured, reference them in a @vite() Blade directive added to the <head> of your application's root template:

<!DOCTYPE html>
<html lang="en">
<head>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <!-- Application content -->
</body>
</html>

If you are importing your CSS via JavaScript, include only the JavaScript entry point:

@vite('resources/js/app.js')

Working With JavaScript Aliases

The Laravel plugin provides a common alias to help you import your application's assets conveniently:

{ '@': '/resources/js'}

You can overwrite the '@' alias by adding your own to the vite.config.js configuration file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
  plugins: [
    laravel(['resources/ts/app.tsx']),
  ],
  resolve: {
    alias: {
      '@': '/resources/ts',
    },
  },
});

Refreshing on Save

When using Vite with traditional server-side rendering in Blade, Vite can automatically refresh the browser on view file changes. Enable this by specifying the refresh option as true:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
  plugins: [
    laravel({
      refresh: true,
    }),
  ],
});

Custom Base URLs

If your Vite compiled assets are deployed to a separate domain, such as a CDN, specify the ASSET_URL environment variable in your .env file:

ASSET_URL=https://cdn.example.com

All re-written URLs to your assets will be prefixed with this value:

<script src="https://cdn.example.com/build/assets/app.9dce8d17.js"></script>

Conclusion

Using Vite with Laravel 11 simplifies asset bundling and enhances your development workflow. Whether you're working with Blade templates or building SPAs, Vite provides a fast and efficient way to manage your application's assets. For more detailed information, refer to the official Laravel Vite documentation.

Learn more about Vite and how it can streamline your asset bundling process in Laravel applications. Check out the official documentation for more examples and advanced usage.