Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Hack your Nuxt router! @andoshin11 Sample Code :https://github.com/andoshin11/studio-andy/pull/119
Slide 2
Slide 2 text
Routing in Nuxt.js ● Place a file inside the pages directory ● Instantly becomes a new route ● Incredibly simple and easy! ● However...
Slide 3
Slide 3 text
By extracting router object ● Easier to overlook route-meta ● Easier to type-check ● Easier to make a url-builder ● Easier to generate breadcrumbs
Slide 4
Slide 4 text
Using router module @nuxtjs/router
Slide 5
Slide 5 text
Quick Setup! ● Install router-module
Slide 6
Slide 6 text
Quick Setup! ● Install router-module ● Register the module
Slide 7
Slide 7 text
Quick Setup! ● Install router-module ● Register the module ● Create router file
Slide 8
Slide 8 text
Tips: migrate from default router Step 1 $ nuxt build Step 2 router.js will be generated Step 3 Copy and paste contents
Slide 9
Slide 9 text
Override RouteMeta type def
Slide 10
Slide 10 text
Making url-builder (preparation) ● First we need a route resolver to retrieve the entire ancestors
Slide 11
Slide 11 text
Making url-builder
Slide 12
Slide 12 text
Generate Breadcrumbs
Slide 13
Slide 13 text
Generate Breadcrumbs
Slide 14
Slide 14 text
Generate Breadcrumbs
Slide 15
Slide 15 text
Generate Breadcrumbs
Slide 16
Slide 16 text
Thank you!