Nuxt @nuxtjs/router-extras Setup

Sep 8, 2020

Capture dynamic routes such as

  • new-york
  • new-york/restaurants
  • tokyo

Install

npm install --save-dev @nuxtjs/router-extras

Edit nuxt.config.js.

export default {  modules: [    '@nuxtjs/router-extras',  ],}

NOTE: The documentation recommend to use buildModules (only use modules if you are using Nuxt < 2.9.0). I am using Nuxt 2.14.4, and it seems like only modules is working.

└── place
    ├── index.vue
    └── restaurants.vue

Edit place/index.vue.

<router>{  path: '/:urlName'}</router><template>  <div>Place: {{ $route.params.urlName }}</div></template>

Edit place/restaurants.vue

<router>{  path: '/:urlName/restaurants'}</router><template>  <div>Restaurants: {{ $route.params.urlName }}</div></template>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.