CODEWITHSUNDEEP
nuxt.js
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 960

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

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.

Upvotes: 4

Views: 4751

Answers (3)

llama-asks
llama-asks

Reputation: 46

Like the others mentioned, you have to add a app/router.options.ts file.

However, one missing piece is you also need to add <NuxtPage /> in your app.vue, giving the matched route a place to render.

Some links for reference:

Upvotes: 0

Yusuf Abid
Yusuf Abid

Reputation: 119

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.

Upvotes: 2

TheAlexLichter
TheAlexLichter

Reputation: 7299

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 😋

Upvotes: 2

Related Questions