Storybook Vue Addon
![Codecov](https://img.shields.io/codecov/c/gh/tobiasdiez/storybook-vue-addon/main?style=flat-square)
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.
-
Add storybook-vue-addon
to your dev-dependencies.
npm install --save-dev storybook-vue-addon
yarn add -D storybook-vue-addon
pnpm add -D storybook-vue-addon
-
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:
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
import VueStories from 'storybook-vue-addon/vite'
export default defineConfig({
plugins: [
VueStories({
}),
],
})
Example: playground/
Rollup
import VueStories from 'storybook-vue-addon/rollup'
export default {
plugins: [
VueStories({
}),
],
}
Webpack
module.exports = {
plugins: [
require('storybook-vue-addon/webpack')({
}),
],
}
Nuxt
export default {
buildModules: [
[
'storybook-vue-addon/nuxt',
{
},
],
],
}
This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
module.exports = {
configureWebpack: {
plugins: [
require('storybook-vue-addon/webpack')({
}),
],
},
}
esbuild
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.