Vue JS

Nuxt.js Dynamic & Nested Routing with Vue Router

In this article Ill show how Nuxt automatically generates the vue-router configuration by parsing the files in your pages directory.

Social Media Digital Marketing & Communication Advisor. Community Manager

Published · Jul 7 2019

  
Nuxt.js is a framework for Vue.js developers which minimises the work required to setup a Vue application and provides at the same time the freedom to extend or customise its core functionalities.

In this article I’ll show how Nuxt automatically generates the vue-router configuration by parsing the files in your pages directory. Secondly I’ll present a case, or rather localised paths, where it is required to ‘switch off’ automatic routes generation and to manually create the vue-router configuration through a Nuxt module.
. . .
Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory.

To navigate between pages, we recommend to use the <nuxt-link> component.

For example:
<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>
. . .
Basic Routes
This file tree:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

will automatically generate:
router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
. . .
Dynamic Routes
To define a dynamic route with a parameter, you need to define a .vue file OR a directory prefixed by an underscore.

This file tree:
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

will automatically generate:
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'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

As you can see the route named users-id has the path :id? which makes it optional, if you want to make it required, create an index.vue file in the users/_id directory instead.

Warning: dynamic routes are ignored by the generate command: API Configuration generate

Validate Route Params
Nuxt.js lets you define a validator method inside your dynamic route component.

In this example: pages/users/_id.vue
export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

If the validate method does not return true or a Promise that resolve to true, or throws an Error, Nuxt.js will automatically load the 404 error page or 500 error page in case of an error.

More information about the validate method: API Pages validate
. . .
Nested Routes
Nuxt.js lets you create nested route by using the children routes of vue-router.
To define the parent component of a nested route, you need to create a Vue file with the same name as the directory which contain your children views.
Warning: don't forget to include <nuxt-child/> inside the parent component (.vue file).

This file tree:
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

will automatically generate:
router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}
. . .
Dynamic Nested Routes
This scenario should not often happen, but it is possible with Nuxt.js: having dynamic children inside dynamic parents.

This file tree:
pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

will automatically generate:
router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}
. . .
Hope you found that useful!