Today I am so excited to present you with the new full integration of storybook into NuxtJS and it's so easy to use!
Installation
SETUP of @nuxtjs/storybook is pretty simple.
yarn add --dev @nuxtjs/storybook
After that, you will need to add two files to your .gitignore.
.nuxt-storybook
storybook-static
Optionally you can add this command to your package.json
"storybook": "nuxt storybook",
"storybook:build": "nuxt storybook build"
And that's it! You’re ready to go! What you need to know here is that the NuxtJS storybook module will look recursively in your components folders for **.stories.js. It’s different from the default config of storybook which was looking in the stories folder.
You want more? Yes me too.
There are a list of add-ons that I’m using in my project and I want storybook to work there too.
@storybook/addon-actions
@storybook/addon-docs
@storybook/addon-knobs
@storybook/addon-viewport
@storybook/addon-a11y
One good thing to know is the compatibility of our add-ons with VueJS.
Let's init a basic component.
<template>
<button :style="{backgroundColor: color}">
{{label}}
</button>
</template>
<script>
export default {
props: {
label: {
type: String,
default: ''
},
color: {
type: String,
default: "000000"
}
},
}
</script>
addon-knobs
yarn add @storybook/addon-knobs --dev
As it say in the doc you will have to update NuxtJS config by adding your add-ons one by one.
storybook: {
// Options
addons: [
'@storybook/addon-knobs/register'
]
},
Create the story components/AwesomeButton.stories.js
import { withKnobs, text } from "@storybook/addon-knobs";
export default {
title: 'AwesomeButton',
decorators: [withKnobs]
}
export const MyAwesomeButton = () => ({
template: '<AwesomeButton :label="label" :color="color" />',
props: {
label: {
default: text('Label', 'Awesome button')
},
color: {
default: text('Color Me', '777777')
}
}
})
try it!
yarn storybook
Look at this awesome button!
addon-actions
Add-on actions already come with @nuxtjs/storybook. So you just need to add it into your story
import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from '@storybook/addon-actions';
export default {
title: 'AwesomeButton',
decorators: [withKnobs]
}
export const MyAwesomeButton = () => ({
template: '<AwesomeButton @click.native="clickme" :label="label" :color="color" />',
props: {
label: {
default: text('Label', 'Awesome button')
},
color: {
default: text('Color Me', '777777')
}
},
methods: {
clickme() {
action('button-click')()
}
},
})
addon-docs | MDX
This is one of my favorite addons. With this, you can add more docs and a really nice preview.
yarn add -D @storybook/addon-docs
Here you will have to update your storybook configuration in nuxt.
storybook: {
stories: [
'~/components/**/*.stories.mdx'
],
// Options
addons: ['@storybook/addon-knobs/register', '@storybook/addon-docs'],
},
Now just update AwesomeButton.stories.js by .mdx at the end.
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { withKnobs, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import AwesomeButton from '../components/AwesomeButton.vue';
<Meta title='AwesomeButton' component={AwesomeButton} decorators={[withKnobs]} />
# This is an awesome button
Some **markdown** description, or whatever you want.
<Story name='basic button'>{{
template: '<AwesomeButton @click.native="clickme" :label="label" :color="color" />',
props: {
label: {
default: text('Label', 'Awesome button')
},
color: {
default: text('Color Me', '777777')
}
},
methods: {
clickme() {
action('button-click')()
}
},
}}</Story>
## Example
## Props
<Props of={AwesomeButton} />
The full GitHub project is, of course, available here
addon-viewport
yarn add -D @storybook/addon-viewport
Update the addons array in your nuxt config by adding @storybook/addon-viewport/register
addon-a11y
yarn add -D @storybook/addon-a11y
Update the addons array in your nuxt config by adding @storybook/addon-a11y/register
And voila! Everything is working so easily.
I hope you enjoyed the content. You will find more EXAMPLES on the nuxt storybook website!
The full project HERE
FAQ
In the older version of nuxt you can encounter an error with core-js with .mdx addon. You will have to update your nuxt config to update the babel preset core-js because storybook is using core-js 3
build: {
babel: {
presets(_, [preset, options]) {
options.corejs = { version: 3 }
}
}
}
Soon NuxtJS will update to CoreJS 3 so you will not have this error anymore.
Top comments (0)