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>
5 replies