Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Hack your Nuxt router!
andoshin11
December 11, 2019
Technology
0
700
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
andoshin11
0
160
andoshin11
0
320
andoshin11
2
210
andoshin11
0
140
andoshin11
8
1.1k
andoshin11
0
1.3k
andoshin11
0
44
andoshin11
14
6.6k
andoshin11
3
5.2k
Other Decks in Technology
See All in Technology
line_developers
PRO
1
320
legalforce
PRO
0
110
kentaro
2
310
oracle4engineer
0
140
yoku0825
PRO
2
570
asahi_k2
0
710
aizurage
0
100
kenichimunezawa
0
810
finengine
0
210
soracom
0
130
lmt_swallow
0
190
tsuyo
0
720
Featured
See All Featured
kneath
294
39k
eileencodes
114
25k
rasmusluckow
318
18k
bkeepers
PRO
322
53k
destraynor
146
19k
brad_frost
157
6.5k
davidbonilla
70
3.6k
chriscoyier
683
180k
matthewcrist
73
7.5k
jlugia
217
16k
andyhume
64
3.8k
gr2m
83
11k
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!