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
480
Nuxt3にStorybookを正しく入れてみた
IIHARA
November 28, 2023
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Vue3+Firebase Auth環境で苦労した話
gityosan
0
100
Docusで知り合い向け学習サイト作ってみた
gityosan
0
54
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
110
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
180
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
180
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
37
Other Decks in Technology
See All in Technology
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The Cult of Friendly URLs
andyhume
75
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Gamification - CAS2011
davidbonilla
78
4.9k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Six Lessons from altMBA
skipperchong
24
3.2k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
A better future with KSS
kneath
231
17k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
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!!