NepaliJesus Posts - Answer Overflow

NepaliJesus

•Created by NepaliJesus on 12/25/2024 in #❓・help

How to not have nested layout/pages refresh when the main layout changes

I have the following code:

<NuxtLayout :name="mobile ? 'mobile' : 'default'"
    <NuxtPage/>
</NuxtLayout>

<NuxtLayout :name="mobile ? 'mobile' : 'default'"
    <NuxtPage/>
</NuxtLayout>

So when I change the mobile to be true/false, the layout changes and the page refreshes. Is there a way to make it so that it doesn't refresh?

15 replies

NNuxt

•Created by NepaliJesus on 12/21/2024 in #❓・help

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>

5 replies

Gaming

Programming