Ensure Laravel 9 and PHP 8.0 are used, as Vite is supported out of the box; upgrade if on an older version. 2. Install Vite and required plugins via npm install or manually add vite and laravel-vite-plugin if missing, along with framework-specific plugins like @vitejs/plugin-react or @vitejs/plugin-vue. 3. Create or update vite.config.js to include the laravel plugin with input paths for CSS and JS entry points and enable features like HMR. 4. Replace @mix or hardcoded asset tags in Blade templates with the @vite directive listing the same entry points, allowing automatic dev server integration and production path resolution. 5. Update package.json scripts to include "dev": "vite", "build": "vite build", and "preview": "vite preview" for standard workflow operations. 6. Run npm run dev to start the Vite development server with HMR or npm run build to compile optimized assets to public/build/, where Laravel reads the manifest for correct asset injection. 7. Optionally configure framework support (React/Vue) by installing respective dependencies, updating the config with the appropriate plugin, and adjusting file extensions and imports accordingly. 8. Customize Vite server settings like host and port in the config or via .env.local, especially for Docker or shared environments by setting host: '0.0.0.0' and adjusting HMR settings. The @vite directive seamlessly handles both development and production environments, leverages native ES modules, and eliminates the need for Laravel Mix, resulting in a faster, more scalable build process that integrates smoothly with modern frontend workflows.

Setting up Vite in a Laravel project is straightforward, especially if you're using Laravel 9 or later, which supports Vite out of the box. Here’s how to do it properly and start using modern frontend tooling with your Laravel app.

? 1. Check Laravel and PHP Version

Make sure you're using Laravel 9 and PHP 8.0 . Vite replaced Laravel Mix starting from Laravel 9, so older versions will need to be upgraded or manually configured.

If you're on Laravel 8 or earlier, consider upgrading or installing Vite manually (not recommended — better to upgrade Laravel).

? 2. Install Vite via npm

Run this command in your Laravel project root:

npm install

This installs the default dependencies, including vite, laravel-vite-plugin, and @vitejs/plugin-react or similar, depending on your setup.

If Vite isn't installed (e.g., in older projects), add it:

npm install --save-dev vite laravel-vite-plugin

Also install the required plugin for your frontend framework (optional):

# For React
npm install --save-dev @vitejs/plugin-react

# For Vue
npm install --save-dev @vitejs/plugin-vue

? 3. Configure Vite with Laravel Plugin

Create a vite.config.js file in your project root (if not already present):

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

export default defineConfig({
    plugins: [
        laravel({
            // Specify your entry points
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    // Optional: If you're using React or Vue
    // resolve: {
    //     alias: {
    //         '@': '/resources/js',
    //     },
    // },
});

This tells Vite where your main CSS and JS files are located.

? 4. Update Blade Templates to Use @vite

In your main layout file (e.g., resources/views/layouts/app.blade.php), replace any old Mix calls like @mix or hardcoded script tags with:

@vite(['resources/css/app.css', 'resources/js/app.js'])

This directive:

• Loads the Vite dev server during npm run dev
• Outputs correct build paths in production
• Handles hot module replacement (HMR) automatically

? You only need to list the entry points — Vite will resolve the rest via imports.

? 5. Update package.json Scripts

Make sure your package.json has the correct scripts:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
}

Or, if you want Laravel-specific naming:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
}

? 6. Start Dev Server or Build for Production

During development:

npm run dev

This starts the Vite development server (usually on http://localhost:5173) and enables HMR.

For production build:

npm run build

This compiles and minifies assets into public/build/.

Laravel automatically reads the manifest file generated by Vite (public/build/.vite/manifest.json) to inject correct asset URLs.

? 7. Optional: Use Aliases or Frameworks

React Example

Install React support:

npm install react react-dom

Update vite.config.js:

import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

Then use .jsx files and import React normally.

Vue Example

import vue from '@vitejs/plugin-vue';

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

? 8. Environment & URL Handling

If you need to customize the Vite server host or port, create a .env.local or update Vite config:

export default defineConfig({
    server: {
        host: 'localhost',
        port: 5173,
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [...],
});

For shared environments (like Valet or Docker), you may need to set host: '0.0.0.0' and adjust hmr.host.

Final Notes

• The @vite Blade directive is smart — it works in both dev and production.
• No need to run php artisan serve alongside Vite unless you're testing backend routes.
• Use import/export syntax in your JS — Vite supports ES modules natively.
• Don’t forget to commit public/build/ in production deployments (or build on deploy).

That’s it! You now have a modern, fast frontend build system integrated with Laravel using Vite. It's faster than Webpack, has instant HMR, and scales better.

Basically: install, configure entry points, use @vite, and run npm run dev.

The above is the detailed content of How to set up Vite in a Laravel project?. For more information, please follow other related articles on the PHP Chinese website!