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
750
Nuxt3にStorybookを正しく入れてみた
IIHARA
November 28, 2023
Tweet
Share
More Decks by IIHARA
See All by IIHARA
Vue3+Firebase Auth環境で苦労した話
gityosan
0
180
Docusで知り合い向け学習サイト作ってみた
gityosan
0
74
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
170
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
550
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
410
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
91
Other Decks in Technology
See All in Technology
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
2025年夏 コーディングエージェントを統べる者
nwiizo
0
180
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
いま注目のAIエージェントを作ってみよう
supermarimobros
0
340
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
310
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Building Adaptive Systems
keathley
43
2.7k
Balancing Empowerment & Direction
lara
3
620
Bash Introduction
62gerente
615
210k
Into the Great Unknown - MozCon
thekraken
40
2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Designing for humans not robots
tammielis
253
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.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!!