Creating dynamic routes

Dynamic routes are generated by Nuxt when using underscores. Dynamic routes are useful and unavoidable in a more complex app. So, if you want to create dynamic routes, then just create a .vue file (or directory) with a prefixed underscore followed by the name of the file (or directory). Take the following example:

pages/
--| _slug/
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Then, you will get the following routes from Nuxt without you having to write any of them:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    }
  ]
}

You can find this example app in /chapter-4/nuxt-universal/routing/dynamic-routes/ in our GitHub repository.

Dynamic...