nuxt storybook zero configuration with @nuxtjs/storybook module
Tags: vue, storybook, nuxt
Published: 2020-08-04 02:35:08

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/](https://storybook.nuxtjs.org/)

## Installation

[SETUP](https://storybook.nuxtjs.org/setup/) of @nuxtjs/storybook is pretty simple.

```bash
  yarn add --dev @nuxtjs/storybook
```

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

```bash
.nuxt-storybook
storybook-static
```

Optionally you can add this command to your package.json

```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. 

```bash
@storybook/addon-actions
@storybook/addon-docs
@storybook/addon-knobs
@storybook/addon-viewport
@storybook/addon-a11y
```

One good thing to know is the [compatibility](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) of our add-ons with VueJS.

Let's init a basic component.

```vue
<template>
  <button :style="{backgroundColor: color}">
      {{label}}
  </button>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: "000000"
        }
    },

}
</script>
```

## [addon-knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs)

```bash
yarn add @storybook/addon-knobs --dev
```

As it say in the [doc](https://storybook.nuxtjs.org/options) you will have to update NuxtJS config by adding your add-ons one by one.

```js
storybook: {
    // Options
    addons: [
      '@storybook/addon-knobs/register'
    ]
  },
```

Create the story components/AwesomeButton.stories.js

```jsx
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!

```bash
yarn storybook
```

Look at this awesome button!

## [addon-actions](https://github.com/storybookjs/storybook/tree/master/addons/actions)

Add-on actions already come with @nuxtjs/storybook. So you just need to add it into your story 

```jsx
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](https://github.com/storybookjs/storybook/tree/master/addons/docs/vue)

This is one of my favorite addons. With this, you can add more docs and a really nice preview. 

```bash
yarn add -D @storybook/addon-docs
```

Here you will have to update your storybook configuration in nuxt.

```js
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.

```jsx
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](https://github.com/storybookjs/storybook/tree/release/3.4/addons/viewport)

```bash
yarn add -D @storybook/addon-viewport
```

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

## [addon-a11y](https://github.com/storybookjs/storybook/tree/master/addons/a11y)

```bash
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](https://storybook.nuxtjs.org/examples) on the nuxt storybook website!

The full project [HERE](https://github.com/f3ltron/nuxtstorybook)

## 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 

```js
build: {
    babel: {
      presets(_, [preset, options]) {
        options.corejs = { version: 3 }
    }
  }
}
```

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