tobiasdiez / storybook-vue-addon

Storybook stories in native Vue format
MIT License
46 stars 1 forks source link
storybook storybook-addon vite vue webpack

Storybook Vue Addon

NPM version NPM downloads Github Actions Codecov

A Storybook addon that allows to write stories in native Vue syntax and compiles it to Storybook's CSF format.

Example: Button.stories.vue

<script setup lang="ts">
import Button from './Button.vue'
</script>
<template>
  <Stories
    title="Stories in Vue format 😍"
    :component="Button"
  >
    <Story title="Primary">
      <Button
        background="#ff0"
        label="Button"
      />
    </Story>
    <Story title="Secondary">
      <Button
        background="#ff0"
        label="πŸ˜„πŸ‘πŸ˜πŸ’―"
      />
    </Story>
    <Story title="Tertiary">
      <Button
        background="#ff0"
        label="πŸ“šπŸ“•πŸ“ˆπŸ€“"
      />
    </Story>
  </Stories>
</template>

Features

This package is currently in an early alpha stage and supports only the fundamental Storybook features. Compatibility with more advanced features and addons is work in progress. Please open an issue if you encounter any bugs or missing integrations.

The way to write stories as idiomatic Vue templates is heavily inspired by the great Histoire.

Installation

Note: Currently, only the @storybook/vue3-vite builder is supported (or the deprecated @storybook/builder-vite version 0.2.7 or higher).

  1. Add storybook-vue-addon to your dev-dependencies.

    # npm
    npm install --save-dev storybook-vue-addon
    
    # yarn
    yarn add -D storybook-vue-addon
    
    # pnpm
    pnpm add -D storybook-vue-addon
  2. In .storybook/main.js, add *.stories.vue to the stories patterns and storybook-vue-addon as an addon.

     "stories": [
       "../src/**/*.stories.mdx",
    -    "../src/**/*.stories.@(js|jsx|ts|tsx)"
    +    "../src/**/*.stories.@(js|jsx|ts|tsx|vue)"
     ],
     ...
     "addons": [
       "@storybook/addon-essentials",
    +   "storybook-vue-addon"
     ],
    

Adding documentation

You can add documentation for your components directly in your story SFC using the custom docs block.

<template>Define your stories here as above</template>

<docs lang="md">
import { Canvas } from '@storybook/blocks';

# Documentation

Everything in one place. Isn't it great?

You can render stories in the docs using the `<Canvas>` component.

<Canvas />
</docs>

You can use Markdown’s readable syntax (such as # heading) for your documentation, include stories, and freely embed JSX component blocks at any point in the file. See Storybook Docs for more information. There are a few minor differences to standard MDX documentation pages:

Typescript support

Volar should be able to automatically recognize the Stories and Story components. It is also possible to import them from storybook-vue-addon:

import type { Stories, Story } from 'storybook-vue-addon/core'

Manual usage

If for whatever reason you process Storybook stories in your build pipeline, you probably want to first transpile the Vue stories to classical CSF stories by adding storybook-vue-addon to your build.

Vite
```ts // vite.config.ts import VueStories from 'storybook-vue-addon/vite' export default defineConfig({ plugins: [ VueStories({ /* options */ }), ], }) ``` Example: [`playground/`](./playground/)
Rollup
```ts // rollup.config.js import VueStories from 'storybook-vue-addon/rollup' export default { plugins: [ VueStories({ /* options */ }), ], } ```
Webpack
```ts // webpack.config.js module.exports = { /* ... */ plugins: [ require('storybook-vue-addon/webpack')({ /* options */ }), ], } ```
Nuxt
```ts // nuxt.config.js export default { buildModules: [ [ 'storybook-vue-addon/nuxt', { /* options */ }, ], ], } ``` > This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts // vue.config.js module.exports = { configureWebpack: { plugins: [ require('storybook-vue-addon/webpack')({ /* options */ }), ], }, } ```
esbuild
```ts // esbuild.config.js import { build } from 'esbuild' import VueStories from 'storybook-vue-addon/esbuild' build({ plugins: [VueStories()], }) ```

πŸ’» Development

Commands:

Sponsors

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.