Open5

通常のStorybookからNuxt Storybookへの移行する

JavaScript
Nuxt
Storybook
TypeScript
Vue.js
Mikihiro SaitoMikihiro Saito

目的

https://github.com/nuxt-modules/storybook

  • 使用しているStorybookが古くなっているので移行したい
  • nuxt modulesでstorybookのモジュールを見つけた
    • Nuxt Communityに依存関係の多くを丸投げできるのでは？
  • dev toolsから参照できるのは便利そう
Mikihiro SaitoMikihiro Saito

モジュールには何が入っているの？

現時点では2つのpackageで構成されている

  • nuxt-module
    • dev-toolsとの連携
    • 開発用サーバーでStorybookのビルドと起動
    • ビルドエラーのログ出力処理
  • storybook-addon
    • @storybook/vue3がそのままexportされている
    • storybookのsetup
    • nuxtに設定しているプラグインの注入
    • $fetchの依存関係注入
    • useRoute等のcomposablesやNuxtLink等のコンポーネント注入
    • viteの設定
      等々