Laravel mix/Vite for asset compilation

14041 views

                  {
  "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',
    },
});

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.

Carlos Mendez

More from Carlos Mendez

Laravel mix/Vite for asset compilation

0 Comments

More from Carlos Mendez