tessl/npm-storybook--vue3-vite

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

—

Pending

Overview

Eval results

Files

Framework Configuration

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

Core configuration system for integrating Vue 3 with Vite in Storybook, providing type-safe configuration options and framework-specific settings.

Capabilities

Framework Options

Configuration interface for framework-specific options including builder settings and documentation generation.

/**
 * Configuration options for the Vue 3 Vite framework
 */
interface FrameworkOptions {
  /** Vite builder configuration options */
  builder?: BuilderOptions;
  /** 
   * Plugin to use for generation docs for component props, events, slots and exposes.
   * 
   * "vue-component-meta" supports more complex types, better type docs, 
   * and js(x)/ts(x) components. Will become the default in the future.
   * 
   * Set to `false` to disable docgen processing for improved build performance.
   * 
   * @default 'vue-docgen-api'
   */
  docgen?: boolean | VueDocgenPlugin | {
    plugin: 'vue-component-meta';
    /**
     * Tsconfig filename to use. Should be set if your main tsconfig.json 
     * includes references to other tsconfig files like tsconfig.app.json.
     * 
     * @default 'tsconfig.json'
     */
    tsconfig: `tsconfig${string}.json`;
  };
}

Storybook Configuration

Main configuration interface that extends base Storybook configuration with Vue 3 Vite specific options.

/**
 * The interface for Storybook configuration in main.ts files
 */
type StorybookConfig = Omit<
  StorybookConfigBase,
  keyof StorybookConfigVite | keyof StorybookConfigFramework
> & StorybookConfigVite & StorybookConfigFramework;

interface StorybookConfigFramework {
  framework: FrameworkName | {
    name: FrameworkName;
    options: FrameworkOptions;
  };
  core?: StorybookConfigBase['core'] & {
    builder?: BuilderName | {
      name: BuilderName;
      options: BuilderOptions;
    };
  };
}

Framework Type Names

Type definitions for framework and builder identification.

type FrameworkName = CompatibleString<'@storybook/vue3-vite'>;
type BuilderName = CompatibleString<'@storybook/builder-vite'>;

Documentation Plugin Types

Types for configuring component documentation generation.

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

Usage Examples

Basic Framework Configuration

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

const config: StorybookConfig = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: "vue-component-meta",
    },
  },
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
};

export default config;

Advanced Configuration with Custom tsconfig

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",
      },
      builder: {
        // Vite builder options here
      },
    },
  },
  core: {
    builder: {
      name: "@storybook/builder-vite",
      options: {
        // Additional builder options
      },
    },
  },
};

export default config;

Disabling Documentation Generation

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

const config: StorybookConfig = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: false, // Disable for improved build performance
    },
  },
};

export default config;

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