Don’t care about pages feature in nuxt.js ( custom router )

#custom_route_nuxt #nuxtjs #nuxt #code4mk

# pages

pages automaticaly generate router that this amazing. but a big project pages system is so boring. because can’t standard folder system for project specific feature.

if you are familiar with vue router and vue dev this content for you. if you don’t like this content , you can skip this post.

# why not use pages directory

~ if want to this is type router

127.0.0.1:3000/admin/balance

127.0.0.1:3000/admin/withdraw

~ and want this is type directory

pages/
  finance/
   balance.vue
   withdraw.vue

It is not possible, beacuse nuxt generate route automatically.

127.0.0.1:3000/finance/balance and 127.0.0.1:3000/finance/withdraw

# solve

create a folder as your desired name ( ex:project )in root directory.

project/
  finance/
   balance.vue
   withdraw.vue

~ you can use core feature inside your vue file. as( layout , middleware , component, assets and so on

~ create routes folder inside root directory.

custom route vue nuxt

• routes\index.js

module.exports = [
  {
    name: 'balance',
    path: '/admin/balance',
    component: 'project/finance/balance.vue'
  },
  {
    name: 'withdraw',
    path: '/admin/withdraw',
    component: 'project/finance/withdraw.vue'
  }
]

~ nuxt.config.js

// nuxt.config.js                     
const routes = require('./routes/index.js')
router: {
  
  extendRoutes (nuxtRoutes, resolve) {
    routes.forEach((route)=>{
      nuxtRoutes.push({
        name: route.name,
        path: route.path,
        component: resolve(__dirname, route.component)
      })
    })
  }
}

done now your router is ready

127.0.0.1:3000/admin/balance ,127.0.0.1:3000/admin/withdraw and all vue file live inside project/finance folder instead of pages .