Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hack your Nuxt router!

5c97d6b5611feeebc345c3e4742a05a8?s=47 andoshin11
December 11, 2019

Hack your Nuxt router!

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

5c97d6b5611feeebc345c3e4742a05a8?s=128

andoshin11

December 11, 2019
Tweet

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!