tessl/npm-laravel-vite-plugin

Laravel plugin for Vite that enables seamless integration between Laravel applications and Vite's build tooling with SSR support and Inertia.js helpers

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Laravel Vite Plugin

Name: tessl/npm-laravel-vite-plugin
Author: tessl

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