close

    Vue

    Storybook for Vue & Rsbuild helps you preview and iterate on Vue components with the same Rsbuild configuration you use for your application.

    Requirements

    PackageVersion
    vue≥ 3
    @rsbuild/core≥ 1.0.1
    storybook≥ 10.0.0

    Getting started

    Use the steps below in an existing Rsbuild-based Vue project.

    Installation

    Install the Vue framework package to enable Storybook support.

    npm
    yarn
    pnpm
    bun
    deno
    npm install storybook-vue3-rsbuild -D

    Configure .storybook/main.ts

    import { StorybookConfig } from 'storybook-vue3-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-vue3-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config
  },
}

export default config

    You're ready to go! Check the Vue 3 sandbox for a complete reference, and explore the Storybook docs for feature guides.

    Next Steps

    Now that Storybook is running, explore how to create stories for your Vue components:

    Options

    Please refer to the Configuration Guide for framework-specific options and defaults.