or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

app-setup.mdcomponent-testing.mdindex.mdportable-stories.mdstory-types.md
tile.json

tessl/npm-storybook--vue3

Storybook Vue 3 renderer for developing, documenting, and testing UI components in isolation

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

To install, run

npx @tessl/cli install tessl/npm-storybook--vue3@9.1.0

index.mddocs/

Storybook Vue 3 Renderer

Storybook Vue 3 renderer enables Vue 3 developers to create, document, and test UI components in isolation. It provides seamless integration between Storybook's component story framework and Vue 3's composition API and component architecture, offering comprehensive TypeScript support and portable story functionality.

Package Information

  • Package Name: @storybook/vue3
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/vue3

Core Imports

import { Meta, StoryObj, setup } from "@storybook/vue3";
import { composeStory, composeStories, setProjectAnnotations } from "@storybook/vue3";
import { createTest } from "@storybook/vue3/experimental-playwright";

For CommonJS:

const { Meta, StoryObj, setup, composeStory, composeStories, setProjectAnnotations } = require("@storybook/vue3");
const { createTest } = require("@storybook/vue3/experimental-playwright");

Basic Usage

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

// Component metadata
const meta: Meta<typeof MyButton> = {
  title: "Example/Button",
  component: MyButton,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    size: { control: "select", options: ["small", "medium", "large"] },
  },
};

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 3 renderer is built around several key systems:

  • Story Rendering Engine: Core Vue 3 component rendering within Storybook's canvas environment
  • Type System: Comprehensive TypeScript integration preserving Vue 3 component types and props
  • Portable Stories: Ability to reuse stories outside Storybook for testing and documentation
  • Testing Integration: Playwright component testing support and story composition utilities
  • Argument System: Automatic prop extraction and reactive argument handling for Vue components
  • Plugin Architecture: Vue app configuration and plugin setup system

Capabilities

Story Type Definitions

Complete TypeScript type system for Vue 3 component stories, including component metadata, story functions, and story objects with full type safety.

type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;

type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;

type StoryObj<TMetaOrCmpOrArgs = Args> = StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;

type VueRenderer = {
  component: Component;
  storyResult: StoryFnVueReturnType;
};

Story Types

Portable Story Composition

Create reusable story components for testing and external usage, allowing stories to be composed and rendered outside of Storybook environment.

function setProjectAnnotations(
  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]
): NormalizedProjectAnnotations<VueRenderer>;

function composeStory<TArgs extends Args = Args>(
  story: StoryAnnotationsOrFn<VueRenderer, TArgs>,
  componentAnnotations: Meta<TArgs | any>,
  projectAnnotations?: ProjectAnnotations<VueRenderer>,
  exportsName?: string
): JSXAble<ComposedStoryFn<VueRenderer, Partial<TArgs>>>;

function composeStories<TModule extends Store_CSFExports<VueRenderer, any>>(
  csfExports: TModule,
  projectAnnotations?: ProjectAnnotations<VueRenderer>
): MapToJSXAble<Omit<StoriesWithPartialProps<VueRenderer, TModule>, keyof Store_CSFExports>>;

Portable Stories

Vue App Setup and Configuration

Configure Vue application plugins and initialization functions for Storybook stories, enabling proper Vue 3 app context and plugin integration.

function setup(fn: (app: App, storyContext?: StoryContext<VueRenderer>) => unknown): void;

App Setup

Component Testing with Playwright

Integration with Playwright for component testing, providing utilities to create test functions for Vue components within Storybook environment.

function createTest(options?: any): any;

Available from the experimental Playwright submodule:

import { createTest } from "@storybook/vue3/experimental-playwright";

Component Testing

Core Types

import type { WebRenderer, Canvas } from 'storybook/internal/types';
import type { ConcreteComponent, Component } from 'vue';

interface VueRenderer extends WebRenderer {
  component: Omit<ConcreteComponent<any>, 'props'>;
  storyResult: StoryFnVueReturnType;
  mount: (
    Component?: StoryFnVueReturnType,
    options?: { props?: Record<string, any>; slots?: Record<string, any> }
  ) => Promise<Canvas>;
}

type Args = Record<string, any>;
type ArgTypes = Record<string, any>;
type Parameters = Record<string, any>;
type StrictArgs = Record<string, unknown>;
type StoryFnVueReturnType = ConcreteComponent<any>;

interface StoryContext<TArgs = StrictArgs> extends GenericStoryContext<VueRenderer, TArgs> {
  component: Component;
}

type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;

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

type Preview = ProjectAnnotations<VueRenderer>;