N
Nuxt•4d ago
NepaliJesus

Is it possible to have nested layouts within one page?

Something like this but not have the page or layout keep refreshing when switching between layouts. 
<script lang="ts">
import type { User } from './assets/interface/user';
import { useStore } from './stores/stores';

export default defineComponent({
  name: 'App',
  data() {
    return {
      layout: 'main' as LayoutKey
    }
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    return {store, route}
  },
  methods: {
    async getUser() {      
     
    },
  },
  created() {
    this.getUser()
    // this.setLayout()
  },
  components: {
    UploadAvatar
  },
  computed: {
    layoutComputed() {
      return this.route.meta.dynamicLayout != undefined ? this.route.meta.dynamicLayout as LayoutKey : 'main'
    }
  },
  watch: {
    route() {
    }
  }
})
</script>

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


<style lang="scss">
@use "./assets/styles/styles.scss";
</style>
<script lang="ts">
import type { User } from './assets/interface/user';
import { useStore } from './stores/stores';

export default defineComponent({
  name: 'App',
  data() {
    return {
      layout: 'main' as LayoutKey
    }
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    return {store, route}
  },
  methods: {
    async getUser() {      
     
    },
  },
  created() {
    this.getUser()
    // this.setLayout()
  },
  components: {
    UploadAvatar
  },
  computed: {
    layoutComputed() {
      return this.route.meta.dynamicLayout != undefined ? this.route.meta.dynamicLayout as LayoutKey : 'main'
    }
  },
  watch: {
    route() {
    }
  }
})
</script>

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


<style lang="scss">
@use "./assets/styles/styles.scss";
</style>
2 Replies
kapa.ai
kapa.ai•4d ago
Hi @NepaliJesus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to have nested layouts within one page in Nuxt 3, but the approach you've shown might cause issues with page refreshing. Instead, I can suggest a more Nuxt-friendly way to achieve nested layouts without unnecessary refreshes. Here's how you can implement nested layouts in Nuxt 3: 1. Create your layouts in the layouts/ directory. 2. In your app.vue, use a single <NuxtLayout> component: 
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
3. In your pages, you can use definePageMeta to specify the layout: 
<script setup>
definePageMeta({
  layout: 'custom',
})
</script>
<script setup>
definePageMeta({
  layout: 'custom',
})
</script>
4. For nested layouts, you can create a parent layout that includes another <NuxtLayout> component: 
<!-- layouts/parent.vue -->
<template>
  <div>
    <header>Parent Layout Header</header>
    <NuxtLayout name="child">
      <slot />
    </NuxtLayout>
  </div>
</template>
<!-- layouts/parent.vue -->
<template>
  <div>
    <header>Parent Layout Header</header>
    <NuxtLayout name="child">
      <slot />
    </NuxtLayout>
  </div>
</template>
5. Then, in your page, you can specify both layouts: 
<script setup>
definePageMeta({
  layout: 'parent',
  childLayout: 'child'
})
</script>
<script setup>
definePageMeta({
  layout: 'parent',
  childLayout: 'child'
})
</script>
This approach allows you to nest layouts without causing unnecessary refreshes. The layouts will change dynamically based on the page meta information. For more details on working with layouts in Nuxt 3, you can refer to the Nuxt 3 Layouts documentation (https://nuxt.com/docs/guide/directory-structure/layouts). If you need to change layouts dynamically based on some condition, you can use the setPageLayout utility: 
<script setup>
function changeLayout() {
  setPageLayout('new-layout')
}
</script>
<script setup>
function changeLayout() {
  setPageLayout('new-layout')
}
</script>
This method is described in the setPageLayout documentation (https://nuxt.com/docs/api/utils/set-page-layout). Remember that when using <NuxtLayout> within your pages, it should not be the root element to avoid layout/page transition issues, as mentioned in the Nuxt Layout documentation (https://nuxt.com/docs/api/components/nuxt-layout). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@485194454530129930> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?