まさあき( @masaakikunsan )です。
最近、Nuxtを使う機会が増えて来てSPA開発のスピードが以前より上がりNuxtありがとうと感じています。
今の案件で、既存のサービスをNuxtで作り直しているのですが、Storybookを導入しようと思ったところそれに関する記事が一つぐらいしかなかったので、今回はNuxtにStorybookを導入する方法を紹介します。
まぁ普通に導入すればいいので記事がないだけだとは思うのですが...
はじめに
この記事ではStorybookについてとNuxtについては取り扱いません。
参考資料にてStorybookとNuxtについてのオススメの記事を載せるのでそちらを読んでください。
Nuxtのプロジェクトを作成する
まずはじめに、Nuxtのプロジェクトを作成しましょう。
今回はvue-cliを利用していきます。
$ vue init nuxt-community/starter-template my-project
これでNuxtのプロジェクトが作成されたので、試しにサーバーを立ち上げてみましょう。
今回はYarnでやっていきます
$ cd my-project
$ yarn
$ yarn dev
成功しました。
Storybookを導入する
Nuxtのプロジェクトが作成できたのでStorybookを導入し、Storybookの実行に必要なファイルを作成していきましょう。
$ yarn add @storybook/vue
$ mkdir .storybook
$ mkdir stories
$ touch .storybook/config.js
$ touch stories/index.js
Nuxtにstoriesディレクトリを追加するにあたりsrcがないのでどこに追加しようかと悩んだのですが、僕はルートディレクトリに追加することにしました。
理由としましてはcomponents配下を汚したくなかったからです。
これで、Storybookを触る為の下準備が終わったので実行する為の設定を行なっていきましょう。
コンポーネントを定義する為のconfig.jsを記述していきましょう。
import { configure } from '@storybook/vue'
const loadStories = () => {
require("../stories/index")
}
configure(loadStories, module)
最後に、NPMスクリプトを作成してStorybookを実行できるようにします。
package.jsonにスクリプトを追加しましょう。
"scripts": {
"storybook": "start-storybook -p 9001"
}
これで準備は終了です。Storybookを実行して下記画像のようになれば成功です。
あとは、必要なコンポーネントやアドオンを追加してやればOKです。
まとめ
NuxtにもStorybookが導入できました。
Storybookの話をしようとするとなにそれってエンジニアがまだ結構いるあたりそもそもStorybookの導入例もまだ少ないのではないでしょうか？
Storybookの導入することで社内のひとがデザインを容易に確認できるようになったり、認識の齟齬が生まれなくなったりするのでぜひ導入してほしいものです。
この記事でNuxtにStorybookを導入しようとして困る人が減れば幸いです
参考資料
- Nuxt.js
- Nuxtのオススメの記事
- Storybook(公式サイト)
- Storybookのオススメの記事
- Using Storybook with Nuxt
追記
2018/03/19 19:20
@kazupon さんに指摘されて思い出したのですが、Storybookが提供しているCLIを使えばもっと簡単に実装できます
$ npm i -g @storybook/cli
$ cd my-project
$ getstorybook
状態的には上でやってることとほぼ同じになるはずなので好きな方法で実装してください。