How to disable the default routing and specify manual one in Nuxt 3?

Question

First of all, please don't waste your time to overpersuade mе to use Nuxt default directory-based routing: I need the manual routing and that's it.

No updates in "Vue router 4 support" issue of @nuxtjs/router since May 30, 2022 - looks like no way except dealing with manual routing myself if I need it.

I have checked the source code of @nuxtjs/router - the is no much code, but I have not understood where the manual routing has been set to Nuxt.

It is required to do 2 things:

1. Disable the default routing
2. Set the new routing

For the Nuxt 2.X, the disabling part was

if (!options.parsePages) {
  this.nuxt.hook('build:before', () => {
    this.nuxt.options.build.createRoutes = () => {
      return []
    }
  })
}

In the Nuxt 3.X case, there is no createRoutes property anymore.

Then, how I can to specify the new routing? There is the dedicated property?

We can start with inline plugin definition:

import { defineNuxtConfig, NuxtConfig } from "nuxt/config";


export default defineNuxtConfig({
  // ...
  modules: [
    async (inlineOptions: unknown, nuxt: NuxtConfig) => {

    }
  ]
});

By the way, if to try to use the current @nuxtjs/router for Nuxt 3, it will be this error.

Answer 1

You don't need the module anymore in Nuxt3. Now you can create a router.options.ts in the /app folder and edit or fully override the routes 😋

Answer 2

in Nuxt3, you can use RouterConfig for activating manual routing, follow these steps:

1. create ./app/router.options.ts file
2. create ./pages/login.vue file for testing
3. insert this code on ./app/router.options.ts:

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (_routes) => [
    {
      name: 'login',
      path: '/login',
      component: () => import('~/pages/login.vue'),
    }
  ],
}

now you can access http://localhost:3000/login using manual routing.