Vite Plugin

The Vite plugin handles serving components in development and optimizing them for production.

Installation

npm install -D vite-plugin-alpine-components

Configuration

// vite.config.js
import { defineConfig } from 'vite';
import { componentAssetsPlugin } from 'vite-plugin-alpine-components';

export default defineConfig({
    plugins: [
        componentAssetsPlugin({
            src: 'src/components',  // Where component files live
            dest: 'components'      // URL path to serve them at
        })
    ]
});

Options

Development Mode

In development, the plugin:

• Serves component files from src at the dest URL path
• Injects .loading.html content into your HTML
• Enables hot reloading when component files change

Production Build

When building for production:

• HTML minification — Whitespace and comments removed
• JS minification — Terser compression and mangling
• Source maps — Generated for debugging
• Loading files excluded — .loading.html files are only used at build time

Directory Structure

Recommended project layout:

With Custom Base Path

If your app is deployed to a subdirectory:

// vite.config.js
export default defineConfig({
    base: '/my-app/',
    plugins: [
        componentAssetsPlugin({
            src: 'src/components',
            dest: 'components'
        })
    ]
});

// main.js
AlpineComponent.setBase(`${import.meta.env.BASE_URL}components`);