New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-vue-addon
Storybook stories in native Vue format
npm install storybook-vue-addon
Last updated about 8 hours ago
6
Downloads per week
Readme View on GitHub

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.

Installation

Note: Currently, only the vite storybook builder is supported and @storybook/builder-vite version 0.2.7 or higher is required.

  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"
      ],
    

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
// vite.config.ts
import VueStories from 'storybook-vue-addon/vite'

export default defineConfig({
  plugins: [
    VueStories({
      /* options */
    }),
  ],
})

Example: playground/


Rollup
// rollup.config.js
import VueStories from 'storybook-vue-addon/rollup'

export default {
  plugins: [
    VueStories({
      /* options */
    }),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('storybook-vue-addon/webpack')({
      /* options */
    }),
  ],
}


Nuxt
// nuxt.config.js
export default {
  buildModules: [
    [
      'storybook-vue-addon/nuxt',
      {
        /* options */
      },
    ],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('storybook-vue-addon/webpack')({
        /* options */
      }),
    ],
  },
}


esbuild
// esbuild.config.js
import { build } from 'esbuild'
import VueStories from 'storybook-vue-addon/esbuild'

build({
  plugins: [VueStories()],
})


💻 Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10).
  • Install dependencies using pnpm install.

Commands:

  • build: Build everything. Output can be found in dist.
  • dev: Build in watch mode.
  • lint: Check for eslint and prettier issues.
  • test: Run the tests.
  • example:vite: Open the example storybook (using vite).
  • play: Run the playground (currently not used).
  • release: Release a new version to npm.
Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI