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

Hack your Nuxt router!

andoshin11
December 11, 2019

Hack your Nuxt router!

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

andoshin11

December 11, 2019
Tweet

More Decks by andoshin11

Other Decks in Technology

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!