Nuxt 3 doesn't load named routes from nuxt.config.ts

[tiborpino]

Environment

• Operating System: Darwin
• Node Version: v14.18.0
• Nuxt Version: 3.0.0-27408103.b243891
• Package Manager: yarn@1.22.11
• Bundler: Vite
• User Config: vue, modules, buildModules, build, css, app, meta, publicRuntimeConfig, privateRuntimeConfig, router
• Runtime Modules: @nuxtjs/sitemap@2.4.0
• Build Modules: nuxt-purgecss@1.0.0

Reproduction

nuxt.config.ts

export default defineNuxtConfig({ router: { routes: [ { path: '/login', name: 'LoginPage', }, ], }, })

*.vue

<NuxtLink :to="{ name: 'LoginPage' }">link</NuxtLink>

Describe the bug

1. Define named router.routes: [] in nuxt.config.ts
2. Use named routes in *vue via NuxtLink
3. There is an error: No match for {"name":"LoginPage","params":{}}

Additional context

No response

Logs

No match for
 {"name":"LoginPage","params":{}}
  at createRouterError (./node_modules/vue-router/dist/vue-router.cjs.js:827:23)  
  at Object.resolve (./node_modules/vue-router/dist/vue-router.cjs.js:1406:23)  
  at Object.resolve (./node_modules/vue-router/dist/vue-router.cjs.js:2897:38)  
  at ReactiveEffect.fn (./node_modules/vue-router/dist/vue-router.cjs.js:2048:45)  
  at ReactiveEffect.run (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:150:25)  
  at ComputedRefImpl.get value [as value] (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:1090:39)  
  at ReactiveEffect.fn (./node_modules/vue-router/dist/vue-router.cjs.js:2050:35)  
  at ReactiveEffect.run (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:150:25)  
  at ComputedRefImpl.get value [as value] (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:1090:39)  
  at ReactiveEffect.fn (./node_modules/vue-router/dist/vue-router.cjs.js:2075:64)

[danielroe]

Nuxt 3 doesn't support configuration of the router via nuxt.config at all. Instead, use the extendPages function in a module or use the pages:extend hook.

[tiborpino]

But there is a property router.routes on nuxt.config. What's the purpose of the property?

[tiborpino]

Is there a documentation for extendPages or pages:extend?

[danielroe]

But there is a property router.routes on nuxt.config. What's the purpose?

This is a Nuxt 2 property. This should be displayed in your IDE with the @version 2 tag. We're working on making this not show up at all in Nuxt 3 projects 🤞

Not yet - but there should be! I've created #13381 and https://github.com/nuxt/framework/issues/3210 to track.