Vite + Laravel: The Modern Asset Pipeline You Should Being Using

If you started with Laravel before version 9, you likely used Laravel Mix. Vite replaced it and the difference in development speed is staggering. Here's everything you need to know to get the most out of the new asset pipeline.

Why Vite Over Mix?

Mix used Webpack under the hood, which bundles everything before serving it. Vite takes a fundamentally different approach: it serves source files directly via native ES modules during development and only bundles for production. The result is a dev server that starts in under a second and Hot Module Replacement (HMR) that reflects changes in under 50ms — compared to 2-5 seconds with Webpack.

The @vite Directive

Laravel's @vite Blade directive is your entry point. It handles both development (injecting Vite's dev server URL) and production (injecting versioned asset hashes):

<!-- In your layout -->
@vite(['resources/css/app.css', 'resources/js/app.js'])

In development, this injects the Vite client and your files via the dev server. In production after npm run build, it references the hashed filenames in public/build/manifest.json. You get cache-busting for free without configuration.

Hot Module Replacement with Livewire

Vite's HMR works seamlessly with Livewire. When you change a CSS file or a JavaScript module, the change appears in the browser instantly without a full page reload. For Livewire components, configure the Livewire Vite plugin to also trigger HMR when Blade files change:

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                'resources/views/**',   // Blade files
                'app/Livewire/**',       // Livewire components
                'app/Http/Controllers/**',
            ],
        }),
    ],
});

Handling Multiple Entry Points

For applications with different layouts (admin panel, public site, tools), define multiple entry points:

laravel({
    input: [
        'resources/css/app.css',
        'resources/css/tools.css',
        'resources/js/app.js',
        'resources/js/tools.js',
    ],
})

Then use the @vite directive with the appropriate files in each layout:

{{-- Public layout --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])

{{-- Tools layout --}}
@vite(['resources/css/tools.css', 'resources/js/tools.js'])

Environment Variables in JavaScript

Vite exposes environment variables prefixed with VITE_ to your JavaScript code. Set them in .env:

VITE_APP_NAME="SenpaiDev"
VITE_API_BASE_URL="https://api.senpaidev.com"

Access them in JavaScript with import.meta.env.VITE_APP_NAME. Never expose secrets this way — Vite bakes these values into the built JavaScript, making them visible in the browser.

Production Build Optimisation

Run npm run build to generate optimised assets in public/build/. Vite automatically code-splits dynamic imports, tree-shakes unused code, and minifies CSS and JavaScript. Add public/build/ to your deployment process and it just works — the manifest file tells Laravel exactly which hashed filename to use for each asset.

The migration from Mix to Vite takes about 30 minutes for a typical project. The developer experience improvement — instant startup, near-instant HMR — makes it one of the most impactful upgrades you can make to your workflow.