Nuxt.jsにstorybookを導入する

@nuxtjs/storybookというモジュールを使えばよい。
インストール手順に従えば簡単に導入できる。

コンポーネントフレームワークとしてVuetifyを使っているのだが、
storyで愚直にVuetifyのコンポーネントを使うとスタイルが適用されない。
decoratorsという機能を使えば全storyを指定したテンプレートに埋め込むことができる。
vuetifyの場合は公式サイトの例そのまま。

decoratorsの設定をdevサーバーを起動する (npx nuxt storybook) とちゃんとVuetifyのスタイルが適用されているのが分かる。
ただ、静的ファイルを生成 (npx nuxt storybook build) すると一部のスタイルが適用されていない。
ざっと見た感じテーマがちゃんと適用されてなさそう。
生成されたHTMLみると <v-app> とかがそのままのこっており、ちゃんとコンパイルされていない模様。
実際はコンパイルされて<div class="v-application...">ストーリーの中身</div> みたいな形になっているはず。

原因がわかったので追記。
@nuxtjs/vuetifyを使っているのだが、production build時はtreeShakeがtrueになっている様子。
すでにクローズされているissueで議論されているが、storyのtemplateで使われているコンポーネントはtreeshakeのチェック時に検出されないらしい。
v-appはtemplateでしか使っていないため、treeshakeによってビルド結果には含まれていないということみたいだ。
解決策としては、上記issueにいくつか書かれており、

1. ejectして.storybook/preview.jsで明示的にVApp (やそのた必要なコンポーネント)をdecoratorsのcomponentsに記載する
2. VApp (やその他必要なコンポーネント)をラップしたダミーなコンポーネントを定義し、templateで読み込む。(SFCで使われていればtreeshakeされないことを利用)

ただ、下記の二点から今回はstorybookによるビルド時はtreeshakeを無効にするようにした。
①上記の解決策はいずれも必要なコンポーネントをいちいち定義する必要が有り面倒なのと、
②そもそも世間に公開するユースケースではないのでバンドルサイズは最適化することは重要ではない