json blade javascript 83 lines · 4 tabs

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.

Related snips

javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["form"]
  static values = { delay: { type: Number, default: 250 } }

Debounced live search with Stimulus + Turbo Streams

rails hotwire stimulus

by codesnips 4 tabs

php

<?php

namespace App\Providers;

use App\Contracts\PaymentGateway;
use App\Services\StripePaymentGateway;

Laravel service container and dependency injection

laravel dependency-injection service-container

by Carlos Mendez 2 tabs

javascript

import { Application } from "@hotwired/stimulus"
import FormSubmitController from "./controllers/form_submit_controller"

const application = Application.start()
application.debug = false

Disable submit button while Turbo form is submitting

rails hotwire stimulus

by codesnips 3 tabs

javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    url: String,
    delay: { type: Number, default: 800 },

Stimulus: autosave draft with Turbo-friendly requests

rails stimulus hotwire

by codesnips 3 tabs

typescript

import React from "react";

type FallbackProps = {
  error: Error;
  reset: () => void;
};

React Error Boundary + error reporting hook

react frontend error-boundary

by codesnips 3 tabs

erb

<nav class="site-nav" data-controller="preload">
  <ul>
    <li>
      <%= link_to "Dashboard", dashboard_path,
            class: "nav-link",
            data: { turbo_preload: true } %>

Speed up perceived performance with Turbo preload links

rails hotwire turbo

by codesnips 3 tabs

Share this code

Here's the card — post it anywhere.

Laravel mix/Vite for asset compilation — share card

Link copied