Render same page on two different route in Nuxtjs 3

Question

I want to render ecosystem page on both /ecosystem and default / route. I have created page -> ecosystem.vue

Also I have layout -> DefaultLayout.vue where Navbar and Footer components are being used.

In nuxt.config.js file:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  layout: true,
  routes: [
    {
      path: "/",
      component: "ecosystem.vue",
      layout: "DefaultLayout",
    },
    {
      path: "/ecosystem",
      component: "ecosystem.vue",
      layout: "DefaultLayout",
    },
  ],
});

However, after this getting 404 page not found error.

Nuxtjs 3

Answer 1

To render the same page on a different routes. You need to use page:extend hook inside the nuxt.config.ts.

export default defineNuxtConfig({
    hooks: {
        'pages:extend'(pages) {
            pages.push({
                name: 'ecosystem',
                path: '/ecosystem',
                file: '~/pages/index.vue'
            })
        }
    }
})

Note: You don't need to create the ecosystem file inside the pages. The page.push() will handle it.

Now, when you go to /ecosystem page. It will output the same page content inside the pages index.vue

More info about custom routing