or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-management.mdindex.mdinertia-helpers.mdplugin-configuration.md
tile.json

index.mddocs/

Laravel Vite Plugin

Laravel Vite Plugin provides seamless integration between Laravel applications and Vite's modern frontend build tooling. It handles asset compilation, hot module replacement during development, and provides configuration options for Laravel-specific requirements including SSR support, full page reload capabilities, and Inertia.js helpers.

Package Information

  • Package Name: laravel-vite-plugin
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install laravel-vite-plugin

Core Imports

Main plugin import:

import laravel from "laravel-vite-plugin";

Inertia.js helpers import:

import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

CommonJS (legacy):

const laravel = require("laravel-vite-plugin");
const { resolvePageComponent } = require("laravel-vite-plugin/inertia-helpers");

Basic Usage

Basic Vite configuration with Laravel plugin:

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

With SSR support:

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

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

Architecture

Laravel Vite Plugin is built around several key components:

  • Core Plugin: Main Vite plugin that configures build settings, dev server, and Laravel-specific options
  • Configuration System: Flexible configuration handling supporting multiple input formats and Laravel conventions
  • Development Server Integration: Hot module replacement, CORS setup, and Laravel environment detection
  • SSR Support: Separate entry points and build configurations for server-side rendering
  • Full Page Reload: Integration with vite-plugin-full-reload for file-watching capabilities
  • Inertia.js Helpers: Utilities for dynamic page component resolution in Inertia.js applications
  • Asset Management: CLI tools for orphaned asset cleanup and manifest-based tracking

Capabilities

Plugin Configuration

Core Laravel Vite plugin factory function and configuration options. Essential for setting up Vite with Laravel applications.

export default function laravel(
  config: string | string[] | PluginConfig
): [LaravelPlugin, ...Plugin[]];

interface PluginConfig {
  /** Entry points to compile */
  input: Rollup.InputOption;
  /** Laravel's public directory (default: 'public') */
  publicDirectory?: string;
  /** Build subdirectory (default: 'build') */
  buildDirectory?: string;
  /** Path to hot file (default: `${publicDirectory}/hot`) */
  hotFile?: string;
  /** SSR entry point */
  ssr?: Rollup.InputOption;
  /** SSR output directory (default: 'bootstrap/ssr') */
  ssrOutputDirectory?: string;
  /** Full reload configuration */
  refresh?: boolean | string | string[] | RefreshConfig | RefreshConfig[];
  /** TLS certificate detection for Herd/Valet */
  detectTls?: string | boolean | null;
  /** @deprecated Use "detectTls" instead. Legacy TLS certificate detection */
  valetTls?: string | boolean | null;
  /** Transform function for development server */
  transformOnServe?: (code: string, url: DevServerUrl) => string;
}

Plugin Configuration

Types

interface RefreshConfig {
  /** Paths to watch for changes */
  paths: string[];
  /** vite-plugin-full-reload configuration options */
  config?: FullReloadConfig;
}

type DevServerUrl = `${'http' | 'https'}://${string}:${number}`;

interface LaravelPlugin extends Plugin {
  config: (config: UserConfig, env: ConfigEnv) => UserConfig;
}

Inertia.js Helpers

Utilities for dynamic page component resolution in Inertia.js applications, enabling code splitting and lazy loading of page components.

export async function resolvePageComponent<T>(
  path: string | string[],
  pages: Record<string, Promise<T> | (() => Promise<T>)>
): Promise<T>;

Inertia.js Helpers

Asset Management

CLI tools for cleaning up orphaned assets that are no longer referenced in Vite manifests.

# Clean orphaned assets from build directory
clean-orphaned-assets [options]

Options:
  --manifest=<path>   Path to manifest file
  --ssr               Use SSR manifest locations
  --assets=<path>     Assets directory path
  --dry-run           Show what would be removed without deleting
  --quiet             Suppress output

Asset Management

Default Configuration Values

export const refreshPaths: string[];

Default paths watched for full page reload functionality.