Modern Laravel applications use Vite to manage frontend assets such as CSS and JavaScript.

Vite provides a fast development server with Hot Module Replacement (HMR), allowing developers to see frontend changes without manually refreshing the entire page in many cases.

Let’s understand how to configure Vite in a Laravel project.

1. What Is Vite?

Vite is a frontend build tool that works with JavaScript, CSS, and modern frontend frameworks such as Vue and React.

In Laravel, Vite helps us:

  • Compile and bundle frontend assets.
  • Run a local development server.
  • Automatically reload changed modules.
  • Optimize assets for production.

Laravel uses the laravel-vite-plugin to integrate Vite with the application.

2. Install Dependencies

First, make sure Node.js and NPM are installed.

node -v
npm -v

In your Laravel project, install the frontend dependencies:

npm install

A standard Laravel project already includes the necessary Vite configuration and dependencies.

3. Configure vite.config.js

Your project’s root directory should contain:

vite.config.js

A typical configuration looks like this:

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: true,
        }),
    ],
});

The input option tells Vite which files to process, while refresh: true enables Laravel's full-page refresh integration for relevant file changes.

4. Load Assets in Blade

In your Blade layout, include:

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

Laravel will load the appropriate assets from the Vite development server during development and from the generated build files in production.

5. Start the Development Servers

Open two terminals in your project directory.

Terminal 1 — Laravel

php artisan serve

Terminal 2 — Vite

npm run dev

Now open the Laravel application’s local URL in your browser.

Keep the Vite development server running while working on your frontend.

6. Build for Production

When your application is ready for deployment, run:

npm run build

Vite generates optimized frontend assets, typically inside:

public/build/

Deploy the generated build files along with your Laravel application.

You generally don’t need to run npm run dev on the production server when serving a prebuilt frontend.

7. Common Vite Errors

Error: Unable to locate file in Vite manifest

Run:

npm install
npm run build

Also verify that the asset paths in your Blade template match the inputs configured in vite.config.js.

Error: Connection refused

Make sure the Vite development server is running:

npm run dev

Frontend changes are not appearing

Check the browser console, Vite terminal, and asset paths. If necessary, restart the development server.

Final Thoughts

Vite makes frontend development in Laravel faster and simpler by managing assets, providing hot updates, and preparing optimized production builds.

Remember these three commands:

npm install
npm run dev
npm run build

npm install installs dependencies, npm run dev starts the development server, and npm run build prepares assets for production.

Understanding Vite configuration is a small but important step toward building and deploying Laravel applications confidently.