Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt3にStorybookを正しく入れてみた

Avatar for IIHARA IIHARA
November 28, 2023

 Nuxt3にStorybookを正しく入れてみた

Avatar for IIHARA

IIHARA

November 28, 2023
Tweet

More Decks by IIHARA

Other Decks in Technology

Transcript

  1. 目次 01 自己紹介 02 前提状況 03 調査 & トライアンドエラー 04

    結果 エンジニア達の「完全に理解した」Talk  #47 2
  2. IIHARA 議長 株式会社メタップスホールディングス エンジニア 23 新卒で入社後、re:shine 開発を担当 Vue/Nuxt Rails Lit

    を主に書きます Github: https://github.com/Gityosan Qiita: https://qiita.com/Gityosan Zenn: https://zenn.dev/iihara メタップスホールディングス 「UNLEASH THE WORLD( 世界を解き放つ) 」 をビ ジョンにre:shine とSRE:shine の二つのサービスを展 開 エンジニア達の「完全に理解した」Talk  #47 4
  3. どれも基本的にはStorybook 公式の Vue ライブラリをベースにしており、 vue やvue-router 由来の関数群は使え ても、useNuxtApp やuseFetch な

    どのNuxt 由来の関数群が使えな い。。。 → 困った (´-ω-`) エンジニア達の「完全に理解した」Talk  #47 10
  4. Storybook-nuxt というNuxt 用 storybook のmodule ライブラリを発 見! README にはDemo も用意されてい

    て早速使ってみることに。 エンジニア達の「完全に理解した」Talk  #47 12
  5. → error の嵐 覚えている主要なエラーとしては #build や #component といった特殊なalias が解決できない なぜがvue

    ファイルが二重でビルドされ、ビルド後ファイルを見ると同 じ関数が2度import されて名前重複のためエラーになる Nuxt3.7 以降ではNuxt 自体のビルド方法が内部的に変わったためかいく つかの内部import が解決できなくなる エンジニア達の「完全に理解した」Talk  #47 15