router.extendRoutes support in nuxt.config.js for Nuxt 3

Environment

PS D:\nuxt3-app> npx nuxi info Nuxt CLI v3.0.0-27288761.d3fb512 11:17:49 RootDir: D:\nuxt3-app 11:17:52 Nuxt project info: 11:17:52

---

• Operating System: Windows_NT
• Node Version: v16.12.0
• Nuxt Version: 3.0.0-27288761.d3fb512
• Package Manager: npm@8.1.0
• Bundler: Vite
• User Config: router
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://codesandbox.io/s/laughing-tereshkova-3byow?file=/nuxt.config.ts (visit /topic1 in Browser)

or

https://github.com/wzdxy/nuxt3-extend-routes-issue

Describe the bug

I need a router like /topic:id(\\d+). So I config a extendRoutes in nuxt.config.ts

export default defineNuxtConfig({
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/product:id(\\d+)',
        name: product1',
        file: join(__dirname, 'pages/product.vue'),
      })
      console.log(routes)
    },
  },
})

But I got a 404 error. And No match found for location with path "/topic1" on terminal.

Additional context

https://github.com/nuxt/framework/pull/1757/commits/c8d8cfbbc438fcb0cccb2328b02b20e6469f3c20

I refer to this commit and rewrite my code，it worked，but very bloated.

  buildModules: [
    '~/modules/addRoutes'
  ],

Logs

No response

[danielroe]

This is how you can do it in Nuxt 3 at the moment (with the extend:pages hook):

import { resolve } from 'path'
import { defineNuxtConfig } from 'nuxt3'
import { createCommonJS } from 'mlly'
const { __dirname } = createCommonJS(import.meta.url)

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      pages.push({
        name: 'cmsPage',
        path: '*',
        file: resolve(__dirname, 'cms/index.vue')
      })
    }
  }
})

[toddpadwick]

Ah Ive figured it out (if anyone else is struggling). The --dirname was causing it to break and it seems its not needed. So the following worked:

import { resolve } from 'path'; 

export default defineNuxtConfig({
	hooks: {
        'pages:extend'(pages) {
            pages.push(
	            {
	                name: 'site.gender',
	                path: '/products/:gender',
	                file: resolve('/pages/products/index.vue'),
	            },
	            {
	                name: 'site.collection',
	                path: '/products/collections/:collection/:gender?',
	                file: resolve('/pages/products/index.vue'),
	            }
            );
        },
    },
});