loading...
Cover image for nuxt storybook zero configuration with @nuxtjs/storybook module

nuxt storybook zero configuration with @nuxtjs/storybook module

f3ltron profile image florent giraud ・3 min read

Today I am so excited to present you with the new full integration of storybook into NuxtJS and it's so easy to use!

https://storybook.nuxtjs.org/

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.

Posted on by:

Discussion

markdown guide