nuxt-routes

Dynamic routes for Nuxt.js

📖 Release Notes

Features

Automatically maps your paths with components (follows same rules with Nuxt.js)

Setup

• Add nuxt-routes dependency using yarn or npm to your project
• Add nuxt-routes to modules section of nuxt.config.js

{
  modules: [
    // With options (routes required and it must be Array)
    ['nuxt-routes', {
      routes: []
    }],
 ],
 
 // Or options here
 nuxtRoutes: {
    routes: []
 }
}

Usage

Set your routes in nuxt.config.js:

{
  nuxtRoutes: {
    routes: [
      '/',
      '/users/:id?',
      '/post/:slug',
      '/post/:slug/comments',
      {
        path: '/:lang(en|ku)?/local/path',
        component: 'local/component.vue'
      },
      {
        path: '/:category',
        children: [
          '',
          {
            path: ':subCategory',
            children: [
              '',
              ':id'
            ]
          }
        ]
      }
    ]
 }
}

Automatically will be converted to:

{
  nuxtRoutes: {
    routes: [
      {
        path: '/',
        component: 'srcDir/pages/index.vue'
      },
      {
        path: '/users/:id?',
        component: 'srcDir/pages/users/_id.vue'
      },
      {
        path: '/post/:slug',
        component: 'srcDir/pages/index.vue'
      },
      {
        path: '/post/:slug/comments',
        component: 'srcDir/pages/index.vue'
      },
      {
        path: '/:lang(en|ku)?/local/path',
        component: 'srcDir/pages/local/component.vue'
      },
      {
        path: '/:category',
        component: 'srcDir/pages/_category.vue',
        children: [
          {
            path: '',
            component: 'srcDir/pages/_category/index.vue'
          },
          {
            path: ':subCategory',
            component: 'srcDir/pages/_category/_subCategory.vue'
            children: [
              {
                path: '',
                component: 'srcDir/pages/_category/_subCategory/index.vue'
              },
              {
                path: ':id',
                component: 'srcDir/pages/_category/_subCategory/_id.vue'
              },
            ]
          }
        ]
      },
    ]
  }
}

For more details check vue-router

Development

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using npm run dev

Notes

• If you want to use .js component instead of .vue then you need to set component of route explicitly. Example:

[{
  path: '/index',
  component: 'index.js'
}]

• If you want to map optional params with _param/index.vue instead of _param.vue you need to set component of route explicitly.

['/:slug']

will be converted to:

[{
  path: '/:slug',
  component: '_slug.vue'
}]

• Use separate file for routes to keep nuxt.config.js clean:

// routes.js
module.exports = ['/', '/login']

// nuxt.config.js
module.exports = {
  nuxtRoutes: { routes: require('./routes.js') }
}

License

MIT License

Copyright (c) Abdulhalim Kara [email protected]