TheLazy.Dev
Portfolio GitHub

Blog

vue |storybook |nuxt

nuxt storybook zero configuration with @nuxtjs/storybook module

flozero

florent giraud

Posted on August 4, 2020

nuxt storybook zero configuration with @nuxtjs/storybook module

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
Enter fullscreen mode Exit fullscreen mode

After that, you will need to add two files to your .gitignore.




.nuxt-storybook
storybook-static
Enter fullscreen mode Exit fullscreen mode

Optionally you can add this command to your package.json

"storybook": "nuxt storybook",
"storybook:build": "nuxt storybook build"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

addon-knobs 

yarn add @storybook/addon-knobs --dev
Enter fullscreen mode Exit fullscreen mode

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'
    ]
  },
Enter fullscreen mode Exit fullscreen mode

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')
       }
   }

})
Enter fullscreen mode Exit fullscreen mode

try it!

yarn storybook
Enter fullscreen mode Exit fullscreen mode

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')()
        }
    },

})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'],
},
Enter fullscreen mode Exit fullscreen mode

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} />
Enter fullscreen mode Exit fullscreen mode

The full GitHub project is, of course, available here

addon-viewport 

yarn add -D @storybook/addon-viewport
Enter fullscreen mode Exit fullscreen mode

Update the addons array in your nuxt config by adding @storybook/addon-viewport/register

addon-a11y 

yarn add -D @storybook/addon-a11y
Enter fullscreen mode Exit fullscreen mode

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 }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Soon NuxtJS will update to CoreJS 3 so you will not have this error anymore.

💖 💪 🙅 🚩
flozero
florent giraud

Posted on August 4, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

nuxt storybook zero configuration with @nuxtjs/storybook module
vue nuxt storybook zero configuration with @nuxtjs/storybook module

August 4, 2020