By Rachel Opperman

Nuxt Routing: 3 Methods for Using Named Routes

10.24.19

3 minutes to read

code nuxt

Share on Twitter Share on Facebook Share on LinkedIn Email this Post

Routing in Nuxt.js is meant to be simple.

One of the framework’s benefits is that it automatically generates the Vue Router configuration based upon the structure of the pages directory. However, using those routes in links can become complicated. Wouldn’t it be more convenient to use a route name instead of a long string that might require variables for parameters? Wouldn’t it be nice to have a consistent name for which to search if you need to do a find and replace? If your answer to either of those questions is “yes,” then read on for three different methods of using named routes in Nuxt.

Method #1: Using the Default Names

As shown in the Nuxt docs, a route name is automatically generated for each page in the application. For example, the page found at pages/user/index.vue will automatically be given the name of ‘user’. That name can then be used in a <nuxt-link>, like so:

<nuxt-link :to=”{ name: ‘user’ }” />

If the route requires parameters, then a params object can be included. For example, a link to the pages/user/_id/edit.vue page would look like the following:

<nuxt-link :to=”{ name: ‘user-id-edit’, params: { id: user.id } }” />

The issue with this method is that the names cannot be chosen by the developer, and if the directory structure is changed, then the route name will change accordingly and links will have to be updated.

Method #2: The Nuxt router-extras Module

The Nuxt router-extras module can be used to specify paths, names, aliases, and more for pages. For example, in the pages/user/login.vue file, the following can be entered below the template and above the script:

<router>
  {
    name: ‘logintime’
  }
</router>

In the app navigation, that name can then be used for the login link, like so:

<nuxt-link :to=”{ name: ‘logintime’ }” />

All routes can be defined in a single file (e.g., the pages/index.vue file) within the same <router> block. However, that block would most likely get larger and larger, which would clutter up that file. It’s possible to have more than one <router> block (e.g., one in each page component file), but then the routing configuration would be scattered throughout the application.

Method #3: Using Nuxt Modules

A Nuxt module can be used to disable the default parsing of page components and, instead, indicate a router.js file found in the project root as being responsible for router configuration. This can be done in 2 different ways: (1) by writing your own module, or (2) by using the Nuxt router module.

Writing Your Own Module

First, create a modules/routes.js file in the project root that contains the following:

const path = require('path')

module.exports = function () {
  // Disable the parsing of pages so that custom routes can be created
  this.nuxt.options.build.createRoutes = () => { }

  this.addTemplate({
    fileName: 'router.js',
    src: path.resolve(`${this.options.srcDir}`, 'router.js')
  })
}

Next, create your router.js file in the project root, which would look something like this:

import Vue from 'vue'
import Router from 'vue-router'
import Posts from '~/pages/posts'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/posts',
        name: 'posts',
        component: Posts
      }
    ]
  })
}

Using the Nuxt router Module

The Nuxt router module functions almost exactly the same as writing your own module, with the difference being that it is not necessary to write your own modules/routes.js file in order to disable the parsing of pages. The module does that for you. Instead, you only have to write your router.js file (like the one shown above) in the project root.

Using one of these two approaches makes it possible to confine router configuration to a single file, and it also permits the developer to define paths, names, and aliases, such as would be done when using Vue Router in a non-Nuxt application.

The issue with this method overall is that all routes would need to be defined, not just routes that require a specific name or alias, because Nuxt’s automatic route generation would be disabled.

-----

So there you have it. These are the 3 methods of using named routes in Nuxt that we’ve come across. If you know of any other methods, please let us know! We’d love to hear about them.

Want to read more tips and insights on working with a Vue development team that wants to help your organization grow for good? Sign up for our bimonthly newsletter.