Nuxt•3w ago

Layers and overriding order

I have this folder structure:

...
layers/
├── base/
│   ├── nuxt.config.js
│   ├── layouts/
│   │   └── test.vue
│   │   └── default.vue
│   └── pages/
│       └── index.vue
│
├── dashboard/
│   ├── nuxt.config.js // extends: ["../base"]
│   ├── layouts/
│   │   ├── test.vue
│   │   └── default.vue
│   └── pages/
│       └── dashboard.vue

...
layers/
├── base/
│   ├── nuxt.config.js
│   ├── layouts/
│   │   └── test.vue
│   │   └── default.vue
│   └── pages/
│       └── index.vue
│
├── dashboard/
│   ├── nuxt.config.js // extends: ["../base"]
│   ├── layouts/
│   │   ├── test.vue
│   │   └── default.vue
│   └── pages/
│       └── dashboard.vue

But dashboard page always uses the layouts from base (default and test).. even when i define in pagemeta in the dashboard page:

  definePageMeta({
    layout: "test", // uses the test.vue layout from base.. expected is to override base's one and use dashboard's one
  });

  definePageMeta({
    layout: "test", // uses the test.vue layout from base.. expected is to override base's one and use dashboard's one
  });

What am i doing wrong?

3 Replies

kapa.ai•3w ago

Hi @Rednib. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can explain why you're experiencing this issue and suggest a potential solution. The behavior you're observing is related to how Nuxt handles layers and the order in which they are processed. According to the Nuxt Layers documentation (https://nuxt.com/docs/guide/going-further/layers), layers are designed to extend and override the default files, configs, and other components of a Nuxt application. However, there's a specific issue that has been reported and addressed regarding the order in which layers are processed, especially for layouts. This issue is described in a GitHub pull request (https://github.com/nuxt/nuxt/pull/23134) which fixes the problem of granularly overriding pages in layers. The problem you're facing is that the base layer's layouts are taking precedence over the dashboard layer's layouts, even though you intend for the dashboard layer to override the base layer. To resolve this issue, you can try the following: 1. Ensure that your nuxt.config.js in the dashboard layer correctly extends the base layer:

export default defineNuxtConfig({
  extends: ['../base']
})

export default defineNuxtConfig({
  extends: ['../base']
})

2. Make sure you're using a recent version of Nuxt that includes the fix for layer overriding. If you're still experiencing issues, you might need to update to the latest version. 3. If the problem persists, you can try to explicitly set the layout in your app.vue file within the dashboard layer:

<script setup lang="ts">
const layout = "test";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const layout = "test";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

This approach is described in the Nuxt layouts documentation (https://nuxt.com/docs/guide/directory-structure/layouts#named-layout). 4. Another option is to use the setPageLayout helper to dynamically change the layout. You can do this in a plugin or middleware for the dashboard:

export default defineNuxtRouteMiddleware((to) => {
  setPageLayout('test')
})

export default defineNuxtRouteMiddleware((to) => {
  setPageLayout('test')
})

This method is explained in the setPageLayout documentation (https://nuxt.com/docs/api/utils/set-page-layout). If none of these solutions work, it's possible that there might be a bug or limitation in the current version of Nuxt you're using. In that case, you might want to report this issue on the Nuxt GitHub repository (https://github.com/nuxt/nuxt) for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@778291831766515793> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RednibOP•3w ago

Is this still an issue/bug? Looks like it has already been fixed...

Gaming

Programming

Layers and overriding order