Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt3にStorybookを正しく入れてみた
Search
IIHARA
November 28, 2023
Technology
0
550
Nuxt3にStorybookを正しく入れてみた
IIHARA
November 28, 2023
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Vue3+Firebase Auth環境で苦労した話
gityosan
0
130
Docusで知り合い向け学習サイト作ってみた
gityosan
0
59
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
130
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
220
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
260
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
51
Other Decks in Technology
See All in Technology
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
230
ドキュメントとの付き合い方を考える
leveragestech
1
140
とある事業会社にとっての Kaggler の魅力
hakubishin3
4
640
Webセキュリティのあるきかた
akiym
32
11k
業務ヒアリングと知識の呪い
tamai_63
0
290
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
7
3.5k
Qdrant を用いた検索改善施策の紹介 / Search Engineering Tech Talk 2024 Summer
visional_engineering_and_design
1
200
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
280
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
160
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
470
KubeVirt Networking ONIC 2024
orimanabu
4
610
ゼロから実装まで!機械学習入門
natsuki0726
0
190
Featured
See All Featured
Designing for Performance
lara
604
68k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Gamification - CAS2011
davidbonilla
80
5k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Designing with Data
zakiwarfel
98
5.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Design by the Numbers
sachag
278
19k
GitHub's CSS Performance
jonrohan
1030
450k
Transcript
Nuxt3 にStorybook を正しく入れてみた ~ 約3 ヶ月の奮闘記~ IIHARA 議長 / エンジニア達の「完全に理解した」Talk
#47
目次 01 自己紹介 02 前提状況 03 調査 & トライアンドエラー 04
結果 エンジニア達の「完全に理解した」Talk #47 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
None
None
前提状況
フロントエンドがVue3 で出来ているreshine でもNuxt3 移行を検 討し始めた その中でStorybook 入れたいという話もあった → そこで個人で管理しているNuxt3 用開発テンプレート「Nuxt3-
template 」リポジトリで導入可能か検証することに エンジニア達の「完全に理解した」Talk #47 8
しかし、Nuxt3 は唯一主要フレームワークの中でStorybook 公式 ライブラリが提供されていない → 自力で環境をセットアップする必要がある エンジニア達の「完全に理解した」Talk #47 9
どれも基本的にはStorybook 公式の Vue ライブラリをベースにしており、 vue やvue-router 由来の関数群は使え ても、useNuxtApp やuseFetch な
どのNuxt 由来の関数群が使えな い。。。 → 困った (´-ω-`) エンジニア達の「完全に理解した」Talk #47 10
さらに調べてみると...
Storybook-nuxt というNuxt 用 storybook のmodule ライブラリを発 見! README にはDemo も用意されてい
て早速使ってみることに。 エンジニア達の「完全に理解した」Talk #47 12
ここからが地獄の始まり 調査 & トライアンドエラー編
None
→ error の嵐 覚えている主要なエラーとしては #build や #component といった特殊なalias が解決できない なぜがvue
ファイルが二重でビルドされ、ビルド後ファイルを見ると同 じ関数が2度import されて名前重複のためエラーになる Nuxt3.7 以降ではNuxt 自体のビルド方法が内部的に変わったためかいく つかの内部import が解決できなくなる エンジニア達の「完全に理解した」Talk #47 15
ここで大幅に時間を食ってしまう 最初はライブラリのみを入れて動かそうとした。エラーは状況が違う故の 設定不足だと思っていた。 しかし、2ヶ月くらいトライしても一向にエラーが全て解消できそうにな い状況にとにかく動く環境を一つ再現することにシフト Demo 上では確かに動いている。しかし、でもを下ろして立ち上げるとエ ラーが発生してしまう... エンジニア達の「完全に理解した」Talk #47
16
残る違いといえば、、、 自分はパッケージマネージャーとしてyarn の1 系を使用していたが、Demo はpnpm の8 系だった。 → そこか!気付けた時は嬉しかった エンジニア達の「完全に理解した」Talk
#47 17
結果
リポジトリを分けた エンジニア達の「完全に理解した」Talk #47 19
Thank you for listening!!