Nuxt•2mo ago

Components not loading when added as children to custom routes in nuxt.config.ts

Hi all. We recently upgraded from 3.4 to 3.12. We have some custom routes in our nuxt.config.ts file. The routes are created like this:

{
    name: 'custom_page_root',
    path: '/custom_thing/new',
    file: '~/components/MyComponent.vue'
    children: []
  }

{
    name: 'custom_page_root',
    path: '/custom_thing/new',
    file: '~/components/MyComponent.vue'
    children: []
  }

We also have some nested routes added as children arrays containing additional route objects like that. In these child routes, we specify which component should be loaded by adding something like file: '~/components/MyComponent.vue. This was working fine until upgrading Nuxt versions, and now, none of the components we add to these child route are rendering. The url route itself works fine, but the component specified in file: ... doesn't render at all, leaving us with a blank page where the component should be loading, but no errors. Has there been a change to how this is supposed to work? Previously, we went by the documentation for custom routing here: https://nuxt.com/docs/guide/recipes/custom-routing#pages-hook Note, this only seems to apply to child routes, and using this syntax in top-level routes works as it should.

Nuxt

Custom Routing · Recipes

In Nuxt 3, your routing is defined by the structure of your files inside the pages directory. However, since it uses vue-router under the hood, Nuxt offers you several ways to add custom routes in your project.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Components not loading when added as children to custom routes in nuxt.config.ts