Custom routes with nuxt extends not working

[memic84]

Environment

• Operating System: Darwin
• Node Version: v16.14.2
• Nuxt Version: 3.1.1
• Nitro Version: 2.1.1
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-5ar22s?file=nuxt.config.ts,base%2Fnuxt.config.ts,base%2Froutes%2FRoutes.js,pages%2Findex.vue

Describe the bug

When the extends functionality from Nuxt 3 is used, and we have a pages directory when is extended into the source. The pages inside the extend are not found by the i18n module.

The pages inside the root work fine. I am on the latest version (8.0.0-beta.9)

You'll see in the reproduction that there is a login and register to showcase this.

The login.vue is located inside the extend base directory, and is not found, also the terminal gives a warning: [@nuxtjs/i18n]: Couldn't find AnalizedNuxtPageMeta by NuxtPage (/login), so no custom route for it

The register.vue is located inside the root, and works fine.

Additional context

If this is something that needs to be fixed in Nuxt 3, is there a workaround for this?

Also you can see what's wrong on the homepage, where the link for login is referring to /login and not /aanmelden, as it is set in routes/Routes.js

It might be a bit related to: #1743, however this is not really a RFC.

Logs

No response

[memic84]

Any news on this? Or can you point me in a direction to fix this?

[shinesoftware]

Any news about this issue?! Our project is stucked into it!

[memic84]

Any news about this issue?! Our project is stucked into it!

Until this is resolved, you could just not use the pages as extend or create duplicate files.

But yeah we are too stuck with this. I'll try to open a PR if i find a solution.

[memic84]

@kazupon I have tried to fix this issue, but got kinda stuck to find the right direction of the fix.

The problem here is that in src/pages.ts the pagesDir doesn't use the directory from the defined layers.

const pagesDir = nuxt.options.dir && nuxt.options.dir.pages ? nuxt.options.dir.pages : 'pages'

What i tried is to add the payers to the pagesDir, but that mean that i'll have to define the pagesDir as an array, which will break the rest of the code ofcourse.

This is what i tried:

  const pagesDir: string[] = []

  if (nuxt.options._layers && nuxt.options._layers.length > 1) {
    interface NuxtLayer {
      config: never
      configFile: string
      cwd: string
    }

    const layers = nuxt.options._layers as NuxtLayer[]
    for (const layer of layers) {
      pagesDir.push(layer.cwd)
    }
  } else {
    pagesDir.push(nuxt.options.dir && nuxt.options.dir.pages ? nuxt.options.dir.pages : 'pages')
  }

As i see it we have two options:

1. Adapt the code, to work with a pagesDir array
2. Is it possible to execute, or hook in... with te setup function after the layers directories already have been merged.

[memic84]

Resolved with: #1925