laravel vite assets frontend

Laravel mix/Vite for asset compilation

Carlos Mendez Jan 2026

4 tabs

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@inertiajs/vue3": "^1.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.12",
    "laravel-vite-plugin": "^0.7.2",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1",
    "vite": "^4.0.0",
    "vue": "^3.2.41"
  }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>{{ config('app.name') }}</title>

    {{-- Include compiled assets --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

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

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
    title: (title) => `${title} - My App`,
    resolve: (name) => resolvePageComponent(
        `./Pages/${name}.vue`,
        import.meta.glob('./Pages/**/*.vue')
    ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

4 files · json, blade, javascript Explain with highlit

Laravel Vite (replacing Mix) compiles and bundles frontend assets with hot module replacement during development. I define entry points in vite.config.js—typically resources/js/app.js and resources/css/app.css. The @vite directive includes compiled assets in Blade. Running npm run dev starts the dev server with HMR. For production, npm run build creates optimized bundles with versioning. Vite supports Vue, React, TypeScript, PostCSS, and Tailwind out of the box. I use import statements for CSS and images—Vite handles bundling. Environment variables prefixed with VITE_ are accessible in frontend code. This modern tooling provides instant feedback during development and optimal builds for production.