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
140
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
760
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
400
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
300
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
750
ain't giving up type-safe Express
andoshin11
2
460
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
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
570
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
140
RemoteFunctionを使ったコロケーション
mkazutaka
1
120
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
410
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
280
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
OPENLOGI Company Profile for engineer
hr01
1
45k
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
150
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
120
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
390
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
350
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
490
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Optimizing for Happiness
mojombo
379
70k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
KATA
mclloyd
PRO
32
15k
Music & Morning Musume
bryan
46
6.9k
Building Applications with DynamoDB
mza
96
6.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Embracing the Ebb and Flow
colly
88
4.9k
A designer walks into a library…
pauljervisheath
209
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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!