Hack your Nuxt router!

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!