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
730
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
73
新卒エンジニアが週一でいろんなLTに参加・登壇してみた話
gityosan
1
170
Marpをカスタマイズして爆速スライド開発環境を手に入れよう
gityosan
0
500
TiptapでストレスフリーなWYSIWYGエディター開発を!
gityosan
0
400
Vueと比べて理解するNuxtの機能~auto-import編~
gityosan
0
87
Other Decks in Technology
See All in Technology
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
450
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
240
話題の MCP と巡る OCI RAG ソリューションの旅 - Select AI with RAG と Generative AI Agents ディープダイブ
oracle4engineer
PRO
5
110
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
290
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
260
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.1k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
350
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
100
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Invisible Side of Design
smashingmag
301
51k
Embracing the Ebb and Flow
colly
86
4.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
A Tale of Four Properties
chriscoyier
160
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Docker and Python
trallard
45
3.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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!!