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.2k
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
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
カーナベル株式会社2024年2月 エンジニアイベント資料
andoshin11
0
110
Private Cloudを支える最高のユーザーガイド運用技術
andoshin11
0
260
TS CompilerがVueを喋れても良いじゃないか
andoshin11
0
680
ain't giving up type-safe Express
andoshin11
2
400
Type Safe "Everything"
andoshin11
0
220
GatewayパターンとSchema駆動開発
andoshin11
8
1.3k
Catch up Nuxt.js 2019.02
andoshin11
0
1.9k
The future of Nuxt.js with TypeScript
andoshin11
0
79
Other Decks in Technology
See All in Technology
JEP 480: Structured Concurrency
aya_ebata
0
130
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
200
Discovering AI Models
picardparis
4
3.9k
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
210
実務における脅威モデリングを考えよう
nikinusu
0
460
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
グイグイ系QAマネージャーの仕事
sadonosake
0
290
リアルお遍路+SORACOM IoT
ozk009
1
130
プログラム検証入門
riru
6
860
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
180
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Code Review Best Practice
trishagee
62
16k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Done Done
chrislema
180
16k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
A Tale of Four Properties
chriscoyier
155
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
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!