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
540
Nuxt3にStorybookを正しく入れてみた
IIHARA
November 28, 2023
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Vue3+Firebase Auth環境で苦労した話
gityosan
0
120
Docusで知り合い向け学習サイト作ってみた
gityosan
0
59
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
110
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
210
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
230
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
43
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
1
160
Our Journey from in-House CD System to Open Source
ffjlabo
0
100
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
FastConnect の冗長性
ocise
0
7.1k
waitany と waitall を作った話
mrkn
0
110
Dify - LINE Bot連携 考え方と実用テクニック
uezo
5
1.1k
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
[RSJ24] Object Segmentation from Open-Vocabulary Manipulation Instructions Based on Optimal Transport Polygon Matching with Foundation Models
keio_smilab
PRO
0
120
エンジニア向け会社紹介資料
caddi_eng
15
250k
2024年版 運用者たちのLLM
nwiizo
3
290
SHIFTの課題と目指したい組織像 / 20240827 Rinto Ikenoue
shift_evolve
0
140
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
1k
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Adopting Sorbet at Scale
ufuk
72
8.9k
Practical Orchestrator
shlominoach
185
10k
Writing Fast Ruby
sferik
623
60k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
How to Think Like a Performance Engineer
csswizardry
15
910
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
33
1.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
BBQ
matthewcrist
83
9.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
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!!