ほぼ、Zero configurationでNuxt.jsにStorybookの環境を作る


## これまでの Nuxt.js + storybook

これまで、Nuxt.jsにStorybookの環境を作るには、
storybookをインストール後、
.storybook/main.js, .storybook/preview.js
などを作成して、nuxt.config.jsやpluginの内容を転記して
nuxtが起動したときと同じ見た目になるように2重で設定を書いたりしてました。


# nuxtjs/storybook の登場！！
nuxt-communityから
[nuxtjs/storybook](https://storybook.nuxtjs.org/)
が8月1日にv1.0.0リリースされました。
現在(2020/09/03)時点でv2.2.0までアップデートしています。

nuxtjs/storybookは、

* Zero configuration
* Nuxt webpack configuration
* Nuxt plugins support
* Story discovery from nuxt modules
* Nuxt components support
* Storybook Generate
* Hot reload support

を謳っているツールで設定はほぼ書かなくても
nuxt.config.jsの内容を勝手に読み込んでstorybookを起動してくれるので
**設定を２重で書かなくて良くなりました！！**

ということで試しに動かしてみました。

## Nuxt のインストール

```
 $ npx create-nuxt-app nuxt-sandbox
```

初期設定は以下のようにしてみました。

```
create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in nuxt-sandbox
? Project name: nuxt-sandbox
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Buefy
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: Semantic Pull Requests
```

## nuxtjs/storybook のインストール

```
$ npm install --save-dev @nuxtjs/storybook
```

## core-js@3 のインストール

storybook@2.2は、内部でcore-js@3を使用しているため起動時にエラーが出るので以下を先に入れておきます。

```
$ npm install --save-dev core-js@3 @babel/runtime-corejs3
```


## .gitignore に　以下を追記

nuxtjs/storybookが起動時にいくつかのファイルを生成するためそれをgitの対象から除外させます。

```.gitignore
.nuxt-storybook
storybook-static
```

## storybook 起動

```
$ npx nuxt storybook
```

これで、nuxt.config.jsを読み込んだstorybookが起動できました。

![スクリーンショット 2020-09-03 2.02.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10344/24e903aa-c00e-1ea2-aea1-088dcc2f850a.png)


とりあえず起動はできたので、
storyファイルを追加してコンポーネントをstorybook上で確認します。

## コンポーネントテスト用のstoryファイルを追加

nuxtのインストールオプションで
buefyを選ぶと、componentsフォルダ以下にCard.vueが自動的に作られているので
それをstorybookで確認するためのstoryファイルを追加します。

```Card.stories.ts
import Card from './Card.vue'

export default {
  title: 'Card',
}

export const Normal = () => ({
  components: { Card },
  template:
    '<card title="Free" icon="github">Open source on <a href="https://github.com/buefy/buefy"> GitHub </a></card>',
})
```

今までは、storybook用に色々設定しないとダメだったstylesheet,iconとも正常に適用されているのが確認できました。

![スクリーンショット 2020-09-03 15.33.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10344/adc3d0f9-0b6f-1d06-16a2-a1e12cff7ee4.png)


## Essential addons インストール

ついでにaddonも[zero config](https://storybook.js.org/docs/vue/essentials/introduction)を謳っている**Essential addons**を入れてみました。

```
$ npm install --save-dev @storybook/addon-essentials
```

インストールすると自動的に以下のaddonもインストールされ使えるようになります。

* Docs
* Controls
* Actions
* Viewport
* Backgrounds
* Toolbars & globals


### 使用するAddonをnuxt.config.jsに記載

storybook用の設定をnuxt.config.jsに追記します。
※ 今までと違い、nuxtjs/storybookでは/registerまで書かないとエラーになってしまうようです。

```nuxt.config.js
export default {
  storybook: {
    addons: [
      '@storybook/addon-actions/register',
      '@storybook/addon-backgrounds/register',
      '@storybook/addon-controls/register',
      '@storybook/addon-docs/register',
      '@storybook/addon-toolbars/register',
      '@storybook/addon-viewport/register',
    ],
  },
}
```


![スクリーンショット 2020-09-03 15.12.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10344/b21ef22b-4729-edb2-ba5c-500e31da4343.png)

Docs,Viewport,Controlsのメニューが表示されているのが確認できるかと思います。