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
Hack your Nuxt router!
Search
andoshin11
December 11, 2019
Technology
0
1.3k
Hack your Nuxt router!
Enhance your Nuxt application by extracting the router object and hacking it!
Here's how.
andoshin11
December 11, 2019
Tweet
Share
More Decks by andoshin11
See All by andoshin11
カーナベルにおけるProtobuf二次利用例
andoshin11
0
120
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
700
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
380
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
740
ain't giving up type-safe Express
andoshin11
2
450
Type Safe "Everything"
andoshin11
0
260
GatewayパターンとSchema駆動開発
andoshin11
7
1.5k
Catch up Nuxt.js 2019.02
andoshin11
0
2.1k
Other Decks in Technology
See All in Technology
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.9k
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
390
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
110
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1k
生成AI時代のデータ基盤
shibuiwilliam
4
2.9k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
190
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
500
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
290
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
250
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
380
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
270
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
YesSQL, Process and Tooling at Scale
rocio
173
14k
4 Signs Your Business is Dying
shpigford
184
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Optimizing for Happiness
mojombo
379
70k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Transcript
Hack your Nuxt router! @andoshin11 Sample Code :https://github.com/andoshin11/studio-andy/pull/119
Routing in Nuxt.js • Place a file inside the pages
directory • Instantly becomes a new route • Incredibly simple and easy! • However...
By extracting router object • Easier to overlook route-meta •
Easier to type-check • Easier to make a url-builder • Easier to generate breadcrumbs
Using router module @nuxtjs/router
Quick Setup! • Install router-module
Quick Setup! • Install router-module • Register the module
Quick Setup! • Install router-module • Register the module •
Create router file
Tips: migrate from default router Step 1 $ nuxt build
Step 2 router.js will be generated Step 3 Copy and paste contents
Override RouteMeta type def
Making url-builder (preparation) • First we need a route resolver
to retrieve the entire ancestors
Making url-builder
Generate Breadcrumbs
Generate Breadcrumbs
Generate Breadcrumbs
Generate Breadcrumbs
Thank you!