Same component for two routes breaks layout

Using Nuxt3 with Client Side rendering.

I have a componentecalled

UserForm.vue

UserForm.vue

that I use in 2 routes using custom routing like this:

  // router.js
  {
    path: '/admin/users/add',
    name: 'admin-users-add',
    file: '@/components/Admin/UserForm.vue',
  },
  {
    path: '/admin/users/:id/change',
    name: 'admin-users-id-change',
    file: '@/components/Admin/UserForm.vue',
  },

  // router.js
  {
    path: '/admin/users/add',
    name: 'admin-users-add',
    file: '@/components/Admin/UserForm.vue',
  },
  {
    path: '/admin/users/:id/change',
    name: 'admin-users-id-change',
    file: '@/components/Admin/UserForm.vue',
  },

I have set a custom layout inside the component:

definePageMeta({
  layout: 'admin',
});

definePageMeta({
  layout: 'admin',
});

But when I navigate to one of the routes, it renders the

default.vue

default.vue

layout instead of the admin one

Nuxt•2y ago•

1 reply

JuanMCe

Same component for two routes breaks layout

Using Nuxt3 with Client Side rendering.

I have a componentecalled

UserForm.vue

UserForm.vue

that I use in 2 routes using custom routing like this:

  // router.js
  {
    path: '/admin/users/add',
    name: 'admin-users-add',
    file: '@/components/Admin/UserForm.vue',
  },
  {
    path: '/admin/users/:id/change',
    name: 'admin-users-id-change',
    file: '@/components/Admin/UserForm.vue',
  },

  // router.js
  {
    path: '/admin/users/add',
    name: 'admin-users-add',
    file: '@/components/Admin/UserForm.vue',
  },
  {
    path: '/admin/users/:id/change',
    name: 'admin-users-id-change',
    file: '@/components/Admin/UserForm.vue',
  },