Tweet
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!