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

Inertia.js Helpers

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

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

Capabilities

Page Component Resolution

Resolves page components from Vite's import.meta.glob() patterns for dynamic loading in Inertia.js applications.

/**
 * Resolves page components for Inertia.js dynamic imports
 * @param path - Single path or array of paths to resolve
 * @param pages - Object mapping paths to component promises or factory functions
 * @returns Promise resolving to the matched component
 * @throws Error if no matching page is found
 */
export async function resolvePageComponent<T>(
  path: string | string[],
  pages: Record<string, Promise<T> | (() => Promise<T>)>
): Promise<T>;

Usage Examples:

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

// Basic usage with single path
const component = await resolvePageComponent(
  "Pages/Dashboard",
  import.meta.glob("./Pages/**/*.vue")
);

// Usage with eager loading
const component = await resolvePageComponent(
  "Pages/Dashboard",
  import.meta.glob("./Pages/**/*.vue", { eager: true })
);

// Multiple fallback paths
const component = await resolvePageComponent(
  ["Pages/CustomDashboard", "Pages/Dashboard", "Pages/Home"],
  import.meta.glob("./Pages/**/*.vue")
);

// TypeScript with component typing
interface VueComponent {
  default: any;
  __hmrId?: string;
}

const component = await resolvePageComponent<VueComponent>(
  "Pages/UserProfile",
  import.meta.glob("./Pages/**/*.vue")
);

Integration with Inertia.js

The resolvePageComponent function is designed to work seamlessly with Inertia.js page resolution:

// In your Inertia.js setup (app.js)
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

createInertiaApp({
  title: (title) => `${title} - My App`,
  resolve: (name) => resolvePageComponent(
    `./Pages/${name}.vue`,
    import.meta.glob("./Pages/**/*.vue")
  ),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el);
  },
});

Error Handling

The function throws descriptive errors when page components cannot be resolved:

// Single path error
await resolvePageComponent("NonexistentPage", pages);
// Throws: Error('Page not found: NonexistentPage')

// Multiple paths error
await resolvePageComponent(["Page1", "Page2"], pages);
// Throws: Error('Page not found: Page1,Page2')

Component Loading Patterns

Lazy Loading (Default)

Components are loaded on-demand when accessed:

const pages = import.meta.glob("./Pages/**/*.vue");
// Components load when resolvePageComponent is called

Eager Loading

All components are loaded immediately at build time:

const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
// All components are included in the initial bundle

Mixed Patterns

You can combine different loading strategies for optimal performance:

// Critical pages loaded eagerly
const criticalPages = import.meta.glob("./Pages/{Home,Login,Dashboard}.vue", { eager: true });

// Other pages loaded lazily
const otherPages = import.meta.glob("./Pages/**/*.vue");

// Merge patterns
const allPages = { ...criticalPages, ...otherPages };

const component = await resolvePageComponent(pageName, allPages);

Framework Compatibility

The helper works with various frontend frameworks supported by Inertia.js:

Vue.js

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

const component = await resolvePageComponent(
  "Pages/UserProfile",
  import.meta.glob("./Pages/**/*.vue")
);

React

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

const component = await resolvePageComponent(
  "Pages/UserProfile",
  import.meta.glob("./Pages/**/*.jsx")
);

Svelte

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

const component = await resolvePageComponent(
  "Pages/UserProfile",
  import.meta.glob("./Pages/**/*.svelte")
);