tessl/npm-storybook--vue3-vite

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

—

Pending

Overview

Eval results

Files

Component Documentation

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

Advanced component metadata extraction system supporting both modern and legacy documentation generation approaches for Vue 3 components.

Capabilities

Documentation Plugin Types

Available documentation generation plugins with different capabilities and use cases.

/** Available docgen plugins for Vue components */
type VueDocgenPlugin = 'vue-docgen-api' | 'vue-component-meta';

Documentation Info Types

Type definitions for component documentation information based on the chosen plugin.

/**
 * Type of __docgenInfo depending on the used docgenPlugin
 */
type VueDocgenInfo<T extends VueDocgenPlugin> = T extends 'vue-component-meta'
  ? ComponentMeta
  : ComponentDoc;

/**
 * Single prop/event/slot/exposed entry of __docgenInfo depending on the used docgenPlugin
 * 
 * @example
 * type PropInfo = VueDocgenInfoEntry<'vue-component-meta', 'props'>;
 */
type VueDocgenInfoEntry<
  T extends VueDocgenPlugin,
  TKey extends 'props' | 'events' | 'slots' | 'exposed' | 'expose' = 
    | 'props' | 'events' | 'slots' | 'exposed' | 'expose'
> = ArrayElement<
  T extends 'vue-component-meta'
    ? VueDocgenInfo<'vue-component-meta'>[Exclude<TKey, 'expose'>]
    : VueDocgenInfo<'vue-docgen-api'>[Exclude<TKey, 'exposed'>]
>;

Array Element Utility Type

Helper type for extracting single array element types.

/** Gets the type of a single array element */
type ArrayElement<T> = T extends readonly (infer A)[] ? A : never;

Documentation Plugins

Vue Component Meta (Recommended)

Modern documentation plugin using Volar's vue-component-meta for advanced TypeScript support.

Features:

Advanced Type Support: Handles complex TypeScript types and interfaces
Better Type Documentation: Extracts detailed type information and JSDoc comments
JSX/TSX Support: Works with JavaScript and TypeScript component files
Performance: Optimized for large codebases
Future Default: Will become the default plugin in future versions

Configuration:

docgen: "vue-component-meta"
// OR with custom tsconfig
docgen: {
  plugin: "vue-component-meta",
  tsconfig: "tsconfig.app.json"
}

Vue Docgen API (Legacy)

Legacy documentation plugin using vue-docgen-api for basic component documentation.

Features:

Vue File Support: Processes .vue single-file components
Basic Metadata: Extracts props, events, slots, and methods
Stable: Well-established with consistent behavior
Current Default: Default plugin in current version

Configuration:

docgen: "vue-docgen-api"
// OR explicitly
docgen: {
  plugin: "vue-docgen-api"
}

Component Metadata Structure

Vue Component Meta Format

When using vue-component-meta, components receive detailed metadata:

interface ComponentMeta {
  props: PropMeta[];
  events: EventMeta[];
  slots: SlotMeta[];
  exposed: ExposedMeta[];
  type: TypeMeta;
}

interface PropMeta {
  name: string;
  description?: string;
  type: string;
  schema: PropertyMetaSchema;
  required: boolean;
  default?: any;
}

interface EventMeta {
  name: string;
  description?: string;
  type: string;
  schema: PropertyMetaSchema | PropertyMetaSchema[];
}

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

Vue Docgen API Format

When using vue-docgen-api, components receive basic documentation:

interface ComponentDoc {
  displayName: string;
  description?: string;
  props?: PropDoc[];
  events?: EventDoc[];
  slots?: SlotDoc[];
  methods?: MethodDoc[];
}

interface PropDoc {
  name: string;
  type?: Type;
  description?: string;
  required?: boolean;
  defaultValue?: any;
}

Usage Examples

Accessing Component Documentation

Components processed by the documentation plugins receive a __docgenInfo property:

// In your component
export default defineComponent({
  name: 'MyComponent',
  props: {
    title: String,
    count: Number,
  },
  emits: ['update', 'change'],
});

// After processing, the component will have:
MyComponent.__docgenInfo = {
  props: [
    { name: 'title', type: 'string', required: false },
    { name: 'count', type: 'number', required: false },
  ],
  events: [
    { name: 'update', type: 'void' },
    { name: 'change', type: 'void' },
  ],
  // ... other metadata
};

TypeScript Configuration for vue-component-meta

When using TypeScript configurations with references:

// .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", // References your app-specific config
      },
    },
  },
};

Performance Optimization

For improved build performance, documentation generation can be disabled:

// .storybook/main.ts
const config: StorybookConfig = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: false, // Disables all documentation generation
    },
  },
};

Migration from vue-docgen-api to vue-component-meta

To migrate to the modern plugin:

// Before (vue-docgen-api)
docgen: "vue-docgen-api"

// After (vue-component-meta)
docgen: "vue-component-meta"

// Or with custom tsconfig
docgen: {
  plugin: "vue-component-meta",
  tsconfig: "tsconfig.app.json"
}

Benefits of Migration:

Better TypeScript support
More accurate type extraction
Support for JSX/TSX components
Improved performance
Future-proof (will become default)

Advanced Features

Schema Optimization

The vue-component-meta plugin includes automatic schema optimization to prevent memory issues:

/**
 * Removes nested schemas from component metadata to prevent memory issues
 * @param schema - Property metadata schema to optimize
 */
function removeNestedSchemas(schema: PropertyMetaSchema): void;

Optimization Features:

Memory Management: Removes nested object schemas that can cause out-of-memory errors
Bundle Size Reduction: Reduces build output size by eliminating complex schemas
Enum Preservation: Maintains enum schemas while optimizing their nested structures
Control Generation: Preserves essential schema information for Storybook controls

File Filtering

Component analysis is filtered to include only relevant files:

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

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

Filter Logic:

Include: Vue SFC, TypeScript, JavaScript, and JSX files
Exclude: Story files, virtual modules, and Storybook internal files
Performance: Reduces processing overhead by focusing on component files only

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