nuxt+storybookの環境構築に成功しました

(成功しただけで知見にまとめねばと思える、このフロントエンドのディストピア感はなんだ…)

これです
https://github.com/hikaruna/nuxt-storybook-example

以上
といってはあれなので

コンセプト

nuxtとstorybookをきれいに共存させるのは面倒(ってか無理)だから別パッケージにしよう

はい。もうむりですわ。
頑張って調整して動かしたところで

• なんでテスト(デモ)環境のための設定うんぬんで、本番環境の設定をいじってしまっているの？
• 動いたとして、それ、本当に正しく動いているの？たまたまうごいているんじゃないの？

となります。
そもそもnuxtもstorybookもまともなパッケージ構造をしていない(私はそう思っているが認識が間違ってたら教えてください)ので、ちゃんとしたものなど作れるわけがない

• nuxtがだめな点: vueをpeerDependencyにしていない
• storybook(今回は@storybook/vue)がだめな点: 最終的にreactなど全く関係ないものをpeerDependencyに入れている

もうめちゃくちゃである。

なので

せめて本番環境(nuxt)だけは守りきろう。nuxtはnuxt単体で使ってnuxtにすべてを捧げる文には問題ない。
よってパッケージ構造を storybook-project -> nuxt-project とすることを思い至った。

npm-registyに上げるのは面倒だからyarn-link(npm-link)で済ませよう

storybook-project -> nuxt-project というパッケージ構成にするとして、わざわざそのためだけにnpmにpublishするわけにもいかない。
最近ではgithubがnpm-registyやってくれているのでだいぶマシなんですが、それでも手元で確認したいだけのために、remoteにpublishしたくない。

そういうときにための仕組みがnpmには用意されています。

yarn-link(npm-link)、ローカルで開発するとき便利ですよー。
https://docs.npmjs.com/cli/link.html

yarn-link(npm-link)をいちいちやるのは面倒だからDockerで環境を作ってしまおう

yarn-link(npm-link)って要するにnode_modulesのなかにsymlink貼るだけなので、その後でyarn-installし直したりしたら消えちゃうので、毎回貼り直さないといけない。
など、気にしている時点で、脳みそのカロリーがもったいないので最初からDockerで作ってしまおう

構築手順(Dockerは一旦抜きで)

[app/] $ mkdir nuxt-project
[app/] $ cd nuxt-project
[app/nuxt-project] $ echo '{ "name": "nuxt-project", "version": "0.0.1" }' > package.json
[app/nuxt-project] $ yarn add nuxt
[app/nuxt-project] $ mkdir pages
[app/nuxt-project] $ vi pages/index.vue

via: nuxt#スクラッチで始める

[app/] $ mkdir storybook-project
[app/] $ cd storybook-project
[app/storybook-project] $ echo '{}' > package.json
[app/storybook-project] $ yarn add vue
[app/storybook-project] $ yarn add -D vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue

via: storybook/vue#マニュアルセットアップ(←ただこれは設定ファイル名とstory.jsファイル配置が不整合で動かない、不備ドキュメントなのでそこだけ注意! (この記事執筆時点では))

[app/nuxt-project] $ yarn link

[app/storybook-project] $ yarn link nuxt-project

動かし方

nuxt dev server

[app/nuxt-project] $ npx nuxt

storybook server

[app/storybook-project] $ npx start-storybook

まとめ

どうでしょう、下手に何も工夫しなくても、公式ガイドの最小インストール手順でそのまま動いた。

Dockerを交えた環境構築手順

最初に貼った私のexampleプロジェクトのとおりです。