npm install storybook-vue-addon
Storybook Vue Addon
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.
-
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
-
In
.storybook/main.js
, add*.stories.vue
to the stories patterns andstorybook-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
(usenpm i -g corepack
for Node.js < 16.10). - Install dependencies using
pnpm install
.
Commands:
build
: Build everything. Output can be found indist
.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.