I am facing an issue with route transitions when conditionally disabling layouts on specific pages. I have a <NuxtPage /> in app.vue wrapped in default <NuxtLayout />, which contains a header and a footer. I don’t need this layout on the ‘About’ page, so what I tried to do disable it there – definePageMeta({ layout: false });. The problem is that when if I use a transition and disable a layout on the ‘About’ page, now when I visit this page, the transition disappears. Also, I tried adding a layoutTransition in nuxt.config.ts, but I couldn’t make it work having <NuxtLayout /> in app.vue.

The only solution I’ve found it to remove <NuxtLayout /> from ‘app.vueand add it manually to each page, then create anemptyLayout` with an empty header and footer and add it to the ‘About’ page. However, I feel like this approach isn’t proper, so it’s either I’m doing something wrong or there’s currently no better way to control the transition and multiple layouts at the same time.

The question is: how can I maintain the transition effects when disabling the layout on certain pages without having to manually handle layouts for each page?

Any solution would be greatly 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" }
}