Nuxt/examples/custom-routes

Defining custom routes with Nuxt.js

Nuxt.js is based on vue-router and allows you to defined custom routes 🚀

Concept

Nuxt.js detect and generate automatically the vue-router config according to your file tree of .vue files inside the pages directory.

Basic routes

This file tree:

/pages
|-> /team
    |-> index.vue
    |-> about.vue
|-> index.vue

will automatically generate:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index'
    },
    {
      name: 'team',
      path: '/team',
      component: 'pages/team/index'
    },
    {
      name: 'team-about',
      path: '/team/about',
      component: 'pages/team/about'
    }
  ]
}

Dynamic routes

To define a dynamic route with a param, you need to define a .vue file prefixed by an underscore.

This file tree:

/pages
|-> /projects
    |-> index.vue
    |-> _slug.vue

will automatically generate:

router: {
  routes: [
    {
      name: 'projects',
      path: '/projects',
      component: 'pages/projects/index'
    },
    {
      name: 'projects-slug',
      path: '/projects/:slug',
      component: 'pages/projects/_slug'
    }
  ]
}

Additional feature : validate (optional)

Nuxt.js allows you to define a validator function inside your dynamic route component (In this example: pages/projects/_slug.vue).

If validate function fails, Nuxt.js will automatically load the 404 error page.

<script>
export default {
  validate ({ params }) {
    return /^[A-z]+$/.test(params.slug)
  }
}
</script>

Nested Routes (children)

To define a nested route, you need to define a .vue file with the same name as the directory which contain your children views.

Don't forget to put <nuxt-child></nuxt-child> inside your parent .vue file.

This file tree:

/pages
|-> /users
    |-> _id.vue
|-> users.vue

will automatically generate:

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users',
      children: [
        {
          path: ':id',
          component: 'pages/users/_id',
          name: 'users-id'
        }
      ]
    }
  ]
}

Dynamic Nested Routes

This file tree:

/pages
|-> /posts
    |-> /_slug
        |-> _name.vue
        |-> comments.vue
    |-> _slug.vue
    |-> index.vue
|-> posts.vue

will automatically generate:

router: {
  routes: [
    {
      path: '/posts',
      component: 'pages/posts',
      children: [
        {
          path: "",
          component: 'pages/posts/index',
          name: 'posts'
        },
        {
          path: ':slug',
          component: 'pages/posts/_slug',
          children: [
            {
              path: 'comments',
              component: 'pages/posts/_slug/comments',
              name: 'posts-slug-comments'
            },
            {
              path: ':name',
              component: 'pages/posts/_slug/_name',
              name: 'posts-slug-name'
            }
          ]
        }
      ]
    }
  ]
}

Demo

npm install
npm start

Go to http://localhost:3000 and navigate through the pages.