or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

decoration.mddocumentation.mdindex.mdlegacy-apis.mdrendering.mdstory-types.md
tile.json

tessl/npm-storybook--vue

Storybook Vue 2.x renderer that enables Vue 2.x component story development and documentation (Note: @storybook/vue3 is separate)

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/vue@7.6.x

To install, run

npx @tessl/cli install tessl/npm-storybook--vue@7.6.0

index.mddocs/

Storybook Vue Renderer

Storybook Vue renderer enables Vue 2.x component story development and documentation within the Storybook ecosystem. It provides a complete rendering engine that understands Vue's component system, reactivity model, and template syntax, allowing developers to create interactive component stories with full access to Vue features including props, events, slots, and computed properties.

Package Information

  • Package Name: @storybook/vue
  • Package Type: npm
  • Language: TypeScript
  • Vue Version: Vue 2.x only (for Vue 3, use @storybook/vue3)
  • Installation: npm install @storybook/vue
  • Peer Dependencies: Vue 2.6.8+, Babel Core, CSS Loader

Core Imports

import type { Meta, StoryFn, StoryObj, Decorator, Loader } from "@storybook/vue";

For story configuration:

import { storiesOf, configure, forceReRender, raw } from "@storybook/vue";

For custom rendering:

import { render, renderToCanvas } from "@storybook/vue";

Basic Usage

import type { Meta, StoryObj } from "@storybook/vue";
import MyButton from "./MyButton.vue";

// Component metadata
const meta: Meta<typeof MyButton> = {
  title: "Example/Button",
  component: MyButton,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    backgroundColor: { control: "color" },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// Story definitions
export const Primary: Story = {
  args: {
    primary: true,
    label: "Button",
  },
};

export const Secondary: Story = {
  args: {
    label: "Button",
  },
};

Architecture

The Storybook Vue renderer is built around several key components:

  • Type System: Complete TypeScript definitions for Vue-specific story formats (Meta, StoryFn, StoryObj)
  • Rendering Engine: Vue 2.x compatible renderer that handles component mounting and lifecycle
  • Story APIs: Both legacy (storiesOf) and modern (CSF) story definition patterns
  • Documentation Integration: Automatic component documentation extraction and source code generation
  • Decorator System: Story decoration with Vue component wrapping and context injection

Capabilities

Story Type Definitions

Complete TypeScript support for defining Vue component stories with full type safety and IntelliSense support.

type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
type StoryObj<TMetaOrCmpOrArgs = Args> = StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

Story Types

Legacy Story APIs

Legacy story APIs for backwards compatibility with older Storybook versions and migration scenarios.

function storiesOf(kind: string, module: NodeModule): StoryApi;
function configure(loader: Addon_Loadable, module: NodeModule): void;
function forceReRender(): void;
function raw(): any;

Legacy APIs

Vue Rendering System

Core rendering functionality that handles Vue component mounting, lifecycle management, and DOM integration.

function render(args: Args, context: StoryContext): VueRenderer['storyResult'];
function renderToCanvas(renderContext: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): void;

Rendering System

Story Decoration

Story decoration system for wrapping Vue components with additional context, providers, or styling.

type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
function decorateStory(storyFn: LegacyStoryFn<VueRenderer>, decorators: DecoratorFunction<VueRenderer>[]): LegacyStoryFn<VueRenderer>;

Story Decoration

Documentation Integration

Automatic documentation generation including component prop extraction, source code generation, and argument type inference.

function extractArgTypes(component: VueRenderer['component']): StrictArgTypes | null;
function sourceDecorator(storyFn: any, context: StoryContext): ComponentOptions<Vue>;

Documentation

Types

Core Renderer Types

interface VueRenderer extends WebRenderer {
  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
  storyResult: StoryFnVueReturnType;
}

type StoryFnVueReturnType = Component<any, any, any, any> | AsyncComponent<any, any, any, any>;

type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;

Utility Types

type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
type Preview = ProjectAnnotations<VueRenderer>;

interface ShowErrorArgs {
  title: string;
  description: string;
}