Hack your Nuxt router!

Enhance your Nuxt application by extracting the router object and hacking it!
Here's how.

Transcript

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