Applying default layout to Nuxt.js error page while preserving route transitions

I have set up a default layout that includes a header and footer. This layout works fine for all of my pages since they are inside the pages directory and because I have a <NuxtPage/> wrapped in <NuxtLayout/> in app.vue.

However, I’ve encountered an issue with the error page. It is located outside the pages directory and as a result, the default layout will never be applied.

I’ve considered adding a <NuxtLayout/> component in error.vue, but this approach causes conflicts with the <NuxtLayout/> in app.vue – it re-renders it and breaks the transition. I have both pageTransition and layoutTransition set up in nuxt.config.ts.

How can I make sure that the default layout is applied to the error page while maintaining a transition?