tessl/npm-storybook--vue3-vite

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

—

Pending

Overview

Eval results

Files

Preset Integration

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

Storybook preset that automatically configures Vue 3 and Vite integration, providing seamless setup with zero configuration required for most use cases.

Capabilities

Core Configuration

Defines the core builder and renderer for the Vue 3 Vite framework.

/**
 * Core preset configuration defining builder and renderer paths
 */
const core: PresetProperty<'core'> = {
  builder: string; // Path to @storybook/builder-vite
  renderer: string; // Path to @storybook/vue3
};

Vite Final Configuration

Configures Vite with Vue 3 specific plugins and settings based on framework options.

/**
 * Final Vite configuration function that adds Vue 3 plugins
 * @param config - Current Vite configuration
 * @param options - Storybook preset options
 * @returns Promise<ViteConfig> - Modified Vite configuration
 */
const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => ViteConfig;

Documentation Generation Resolution

Internal function that resolves docgen framework options into a standardized configuration.

/**
 * Resolves the docgen framework option into a standardized configuration
 * @param docgen - Framework docgen option
 * @returns Resolved docgen configuration or false if disabled
 */
function resolveDocgenOptions(
  docgen?: FrameworkOptions['docgen']
): false | { plugin: VueDocgenPlugin; tsconfig?: string };

Resolution Logic:

false → Returns false (docgen disabled)
undefined or true → Returns { plugin: 'vue-docgen-api' } (default)
String value → Returns { plugin: <string> } (direct plugin specification)
Object value → Returns the object as-is (full configuration)

Preset Behavior

Automatic Plugin Registration

The preset automatically registers the following Vite plugins based on configuration:

Template Compilation Plugin: Always included for Vue template processing
Documentation Plugin: Conditionally included based on docgen option:
- vue-component-meta plugin for modern metadata extraction
- vue-docgen-api plugin for legacy documentation generation
- No plugin if docgen is set to false

Framework Option Processing

The preset processes framework options as follows:

// Framework option resolution
const framework = await options.presets.apply('framework');
const frameworkOptions: FrameworkOptions = 
  typeof framework === 'string' ? {} : (framework.options ?? {});

const docgen = resolveDocgenOptions(frameworkOptions.docgen);

Plugin Configuration

Based on the resolved docgen configuration:

if (docgen !== false) {
  if (docgen.plugin === 'vue-component-meta') {
    plugins.push(await vueComponentMeta(docgen.tsconfig));
  } else {
    plugins.push(await vueDocgen());
  }
}

Usage Examples

Using as Storybook Framework

The preset is automatically applied when using the framework in .storybook/main.ts:

import type { StorybookConfig } from "@storybook/vue3-vite";

const config: StorybookConfig = {
  framework: "@storybook/vue3-vite", // Preset automatically applied
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
};

export default config;

Manual Preset Import

For advanced use cases, the preset can be imported directly:

// .storybook/main.js
module.exports = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: "vue-component-meta",
    },
  },
  presets: [
    require.resolve("@storybook/vue3-vite/preset"), // Manual preset import
  ],
};

Framework Option Variations

The preset handles different framework option formats:

// String format (uses defaults)
framework: "@storybook/vue3-vite"

// Object format with options
framework: {
  name: "@storybook/vue3-vite",
  options: {
    docgen: "vue-component-meta"
  }
}

// Object format with custom tsconfig
framework: {
  name: "@storybook/vue3-vite",
  options: {
    docgen: {
      plugin: "vue-component-meta",
      tsconfig: "tsconfig.app.json"
    }
  }
}

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

tessl/npm-storybook--vue3-vite