tessl/npm-storybook--vue3-vite

Storybook framework for Vue 3 applications with Vite build tool integration.

—

Pending

Overview

Eval results

Files

Vite Plugin System

Name: tessl/npm-storybook--vue3-vite
Author: tessl

Standalone Vite plugins for Vue 3 component processing, template compilation, and documentation generation that can be used independently of Storybook.

Capabilities

Storybook Vue Plugin

Main plugin function that provides an array of Vue 3 specific Vite plugins for Storybook integration.

/**
 * Creates an array of Vite plugins for Vue 3 Storybook integration
 * @returns Array of Promise<Plugin> containing Vue template compilation plugin
 */
function storybookVuePlugin(): Promise<Plugin>[];

Template Compilation Plugin

Configures Vue template compilation with proper bundler settings for Storybook.

/**
 * Creates a Vite plugin for Vue template compilation
 * @returns Promise<Plugin> - Vite plugin for template compilation
 */
async function templateCompilation(): Promise<Plugin>;

Vue Component Meta Plugin

Advanced documentation plugin using vue-component-meta (Volar) for modern component metadata extraction.

/**
 * Creates a Vite plugin for component metadata extraction using vue-component-meta
 * @param tsconfigPath - Path to TypeScript configuration file
 * @returns Promise<Plugin> - Vite plugin for component documentation
 */
async function vueComponentMeta(tsconfigPath?: string): Promise<Plugin>;

Vue Docgen Plugin

Legacy documentation plugin using vue-docgen-api for component metadata extraction.

/**
 * Creates a Vite plugin for component metadata extraction using vue-docgen-api
 * @returns Promise<Plugin> - Vite plugin for component documentation
 */
async function vueDocgen(): Promise<Plugin>;

Internal Support Functions

Additional internal functions used by the plugin system.

/**
 * Creates the vue-component-meta checker for metadata extraction
 * @param tsconfigPath - Path to TypeScript configuration file
 * @returns Checker instance for component analysis
 */
async function createVueComponentMetaChecker(tsconfigPath?: string): Promise<Checker>;

/**
 * Component metadata structure extracted by vue-component-meta
 */
interface MetaSource {
  exportName: string;
  displayName: string;
  sourceFiles: string;
  props: PropMeta[];
  events: EventMeta[];
  slots: SlotMeta[];
  exposed: ExposedMeta[];
}

Plugin Details

Template Compilation Configuration

The template compilation plugin configures Vue with the ESM bundler build:

{
  name: 'storybook:vue-template-compilation',
  config: () => ({
    resolve: {
      alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
      },
    },
  }),
}

Vue Component Meta Features

The vue-component-meta plugin provides:

TypeScript Support: Full TypeScript integration with type extraction
Component Analysis: Extracts props, events, slots, and exposed properties
Hot Module Reload: Updates component metadata on file changes
Schema Optimization: Removes nested schemas to prevent memory issues
Filter Configuration: Excludes stories and virtual modules

Vue Docgen Features

The vue-docgen-api plugin provides:

Vue File Processing: Processes .vue single-file components
Legacy Support: Compatible with older Vue projects
Basic Metadata: Extracts basic component information
Simple Integration: Minimal configuration required

Usage Examples

Standalone Vite Configuration

Use the plugins directly in your vite.config.ts:

import { defineConfig } from "vite";
import { storybookVuePlugin } from "@storybook/vue3-vite/vite-plugin";

export default defineConfig({
  plugins: [
    ...storybookVuePlugin(),
    // other plugins...
  ],
});

Plugin Configuration with Options

The plugins are automatically configured based on framework options. For custom behavior, configure through the framework options:

// In .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite";

const config: StorybookConfig = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: {
        plugin: "vue-component-meta",
        tsconfig: "tsconfig.app.json"
      }
    }
  }
};

Plugin Filtering

The vue-component-meta plugin filters files based on patterns:

// Included files
const include = /\.(vue|ts|js|tsx|jsx)$/;

// Excluded files
const exclude = /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|\.storybook\/.*\.(ts|js)$/;

Component Meta Schema

The plugin extracts comprehensive component metadata:

interface MetaSource {
  exportName: string;
  displayName: string;
  sourceFiles: string;
  props: PropMeta[];
  events: EventMeta[];
  slots: SlotMeta[];
  exposed: ExposedMeta[];
}

Hot Module Reload Handling

The vue-component-meta plugin includes comprehensive HMR support for live component metadata updates:

async handleHotUpdate({ file, read, server, modules, timestamp }) {
  const content = await read();
  checker.updateFile(file, content);
  
  // Invalidate modules and trigger reload
  const invalidatedModules = new Set<ModuleNode>();
  for (const mod of modules) {
    server.moduleGraph.invalidateModule(mod, invalidatedModules, timestamp, true);
  }
  
  server.ws.send({ type: 'full-reload' });
  return [];
}

HMR Features:

Live Updates: Component metadata updates immediately when source files change
Module Invalidation: Properly invalidates affected modules in the dependency graph
Full Reload: Triggers browser reload to ensure metadata consistency
File Tracking: Updates internal checker state with modified file content

Install with Tessl CLI

npx tessl i tessl/npm-storybook--vue3-vite

docs

component-docs.md

framework-config.md

index.md

preset-integration.md

vite-plugins.md

tile.json