Help us understand the problem. What is going on with this article?

Nuxt.jsにStorybookを導入する

More than 1 year has passed since last update.

まさあき( @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

スクリーンショット 2018-03-19 17.57.32.png

成功しました。

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を記述していきましょう。

.storybook/config.js
import { configure } from '@storybook/vue'

const loadStories = () => {
  require("../stories/index")
}

configure(loadStories, module)

最後に、NPMスクリプトを作成してStorybookを実行できるようにします。
package.jsonにスクリプトを追加しましょう。

package.json
"scripts": {
  "storybook": "start-storybook -p 9001"
}

これで準備は終了です。Storybookを実行して下記画像のようになれば成功です。

スクリーンショット 2018-03-19 18.12.42.png

あとは、必要なコンポーネントやアドオンを追加してやればOKです。

まとめ

NuxtにもStorybookが導入できました。
Storybookの話をしようとするとなにそれってエンジニアがまだ結構いるあたりそもそもStorybookの導入例もまだ少ないのではないでしょうか?
Storybookの導入することで社内のひとがデザインを容易に確認できるようになったり、認識の齟齬が生まれなくなったりするのでぜひ導入してほしいものです。

この記事でNuxtにStorybookを導入しようとして困る人が減れば幸いです

参考資料

追記

2018/03/19 19:20

@kazupon さんに指摘されて思い出したのですが、Storybookが提供しているCLIを使えばもっと簡単に実装できます

$ npm i -g @storybook/cli
$ cd my-project
$ getstorybook

状態的には上でやってることとほぼ同じになるはずなので好きな方法で実装してください。

masaakikunsan
仮面ライダーになりました。
https://masaakikunsan.com
elevenback
合同会社ElevenBack は Web を通じたソフトウェアによる課題の解決を専門とする企業です。
https://elevenback.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした