Encountering a challenge with route transitions while selectively disabling layouts on specific pages. Within the app.vue, there's a <NuxtPage /> wrapped in default <NuxtLayout /> containing header and footer elements. The 'About' page does not require this layout, so attempted to disable it using
definePageMeta({ layout: false });Experimented with adding a layoutTransition in nuxt.config.ts, yet faced challenges due to having <NuxtLayout /> within app.vue.
The only workaround found was to remove <NuxtLayout /> from app.vue and include it manually on each page, along with creating an emptyLayout for the 'About' page. This approach feels inadequate, raising questions about possible errors or lack of better control over transitions and layouts simultaneously.
Question at hand: How can transition effects be retained while disabling layouts on specific pages without resorting to manual management of layouts per page?
Any insights or solutions would be highly appreciated!
app.vue:
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
about.vue:
<template>
<div>
<div>...</div>
</div>
</template>
<script setup>
definePageMeta({
layout: false,
});
</script>
transition in nuxt.config.ts:
app: {
pageTransition: { name: "page", mode: "out-in" }
}