Socket
Socket
Sign inDemoInstall

storybook-vue-addon

Package Overview
Dependencies
221
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    storybook-vue-addon

Storybook stories in native Vue format


Version published
Maintainers
1
Install size
19.4 MB
Created

Changelog

Source

0.4.0 (2023-05-01)

🔖 Features

  • add support for play functions (#57) (e309234)

🧹 Miscellaneous

  • deps: update all non-major dependencies (#54) (4993db7)
  • deps: update all non-major dependencies (#56) (e3a3396)
  • use renovate widenPeerDependencies preset (f7798bd)

Readme

Source

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

  • Write stories as idiomatic Vue templates, bye bye string-based templates, as wished for in storybookjs/storybook#9768
  • Syntax highlighting and full editor support (including Volar) for writing story templates
  • Add markdown documentation in a custom docs block, directly in your stories.vue files (see below for details)
  • The component that is displayed needs only be declared once (via <Stories :component="...">) and not for every story
  • Simple integration with Storybook and automatic Vite support
  • Light: Vue stories are transpiled into ordinary CSF stories on the fly with minimal overhead

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

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:

  • The <Meta of=...> tag is not needed.
  • You don't need to import the stories file. Simply refer to the defined stories by their name. For example:
    <template>
      <Stories>
        <Story title="Unchecked">
          <Checkbox label="Unchecked" />
        </Story>
      </Stories>
    </template>
    <docs>
      import { Canvas } from '@storybook/blocks';
      <Canvas of={Unchecked} />
    </docs>
    

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.

Keywords

FAQs

Last updated on 01 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc