Nuxt.js: `nuxt generate` doesn't generate HTML file for pages with child routes

[Justineo]

Version

v2.3.4

Reproduction link

https://github.com/Justineo/nuxt-generate-bug

Steps to reproduce

1. Creating a project with create-nuxt-app

2. Create following pages:

   pages
   ├─ ...
   ├─ test
   │  └─ foo.vue
   └─ test.vue
   

3. Run nuxt generate

What is expected ?

In dist directory, there will be independent entry HTML file for both /test and /test/foo:

pages
├─ ...
├─ test
│  └─ foo.html
└─ test.html

What is actually happening?

Entry for route path /test is missing:

pages
├─ ...
└─ test
   └─ foo.html

_{This bug report is available on Nuxt community (#c8315)}

[leopiccionia]

If I understand the related docs, you're just creating a nested route (like vanilla Vue-Router does), not really creating the routed for /test.

Have you tried something like this?

pages
├─ ...
└─ test
   ├─ foo.vue
   └─ index.vue

Or this?

pages
├─ ...
├─ test
│  ├─ foo.vue
│  └─ index.vue
└─ test.vue

[Justineo]

Thanks, Leo. I'm able to workaround this as you suggested by creating a separate index.vue inside the test directory. But it did create the route for /test without /test/index.vue in the dev mode (See below).

[Justineo]

And there is another problem.

pages
├─ ...
└─ test
   ├─ foo.vue
   └─ index.vue

This seems to make /test and /test/foo siblings instead of parent/child, which breaks nested routes.

pages
├─ ...
├─ test
│  ├─ foo.vue
│  └─ index.vue
└─ test.vue

While this will lead to duplication.

I still think it's a problem of nuxt generate itself. It's not producing same result as the server-rendered version.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[Justineo]

Still experiencing this in the latest version of nuxt-edge.

Reproduction step is the same as mentioned in https://github.com/nuxt/nuxt.js/issues/4562#issue-391398271.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[koresar]

This has caused us a lot of trouble. The workaround I have is causing a significant copy-paste of files.

[Grovespaz]

I was bit by this too. I've found a very easy workaround.
Assume that /a works, /a/b doesn't and /a/b/c does for example. Add /a/b to your nuxt.config.js like so:

module.exports = {
  // ... the rest of your here ...

  // Workaround for nuxt bug #4562 (https://github.com/nuxt/nuxt.js/issues/4562)
  generate: {
      routes: [
        '/a/b',
      ]
    },
}

And it will generate that page too.