Laravel Vite Plugin

3.0.1 verified Sat Apr 25 auth: no javascript

Laravel Vite Plugin integrates Vite with Laravel, providing hot module replacement and asset bundling tailored for Laravel projects. Version 3.0.1 requires Vite ^8.0.0 and Node ^20.19.0 or >=22.12.0. It ships with TypeScript definitions and follows Laravel's convention for Vite configuration. Unlike generic Vite plugins, it handles Blade asset referencing, hot file management, and server URL resolution for Laravel's backend-first workflow. Major version bumps align with Vite major releases; v3 introduced Vite 8 support. The plugin is actively maintained by the Laravel core team.

Common errors

error laravel-vite-plugin tried to access a property of undefined (reading 'env') ↓

cause Using an unsupported Vite version (e.g., Vite 5 with plugin v3).

fix

Ensure Vite version matches plugin peer dependency (^8.0.0 for v3).

error Cannot find module 'laravel-vite-plugin' ↓

cause Package not installed or using require() in ESM-only context.

fix

Install the package: npm install laravel-vite-plugin --save-dev. Use import instead of require.

error TypeError: laravel is not a function ↓

cause Incorrect import syntax; may be using default import incorrectly.

fix

Use import laravel from 'laravel-vite-plugin' (default export).

Warnings

breaking v3 requires Vite 8 and Node >=20.19.0 or >=22.12.0; drop Vite 7 support. ↓

fix Upgrade Vite to ^8.0.0 and Node to a supported version (^20.19.0 or >=22.12.0).

breaking v2 requires Vite 6 or 7 and Node 18+; drop Vite 5 support. ↓

fix Upgrade Vite to ^6.0.0 or ^7.0.0.

deprecated Using require() to import the plugin is deprecated; ESM-only since v3. ↓

fix Use import statement instead of require.

gotcha Hot file must be writable and may not auto-create parent directories in some setups; v2.0.1 added auto creation. ↓

fix Ensure the hotFile directory exists or upgrade to >=2.0.1.

gotcha Default CORS origins added in v1.2.0; missing CORS headers can cause HMR issues. ↓

fix Add CORS origins manually or upgrade to >=1.2.0.

Install

npm install laravel-vite-plugin

yarn add laravel-vite-plugin

pnpm add laravel-vite-plugin

Imports

laravel-vite-plugin

wrong

const laravel = require('laravel-vite-plugin');

correct

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

ESM-only since v3; use import syntax. Default export is the plugin function.

refreshing

wrong

const { refreshing } = require('laravel-vite-plugin');

correct

import { refreshing } from 'laravel-vite-plugin';

// Use in vite.config.js for custom refresh logic

Named export for Vite's handleHotUpdate; available as a named export.

Quickstart

Minimal Vite configuration for Laravel app with Vue support, enabling HMR and asset refresh.

// vite.config.js
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(),
  ],
});