From 973b1b86384871d4447467b6fb66a0520d9c8e83 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 25 Oct 2022 14:07:56 +0200 Subject: [PATCH] feat(nuxt): add dev warnings when `setPageLayout` is used incorrectly --- packages/nuxt/src/app/composables/router.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/nuxt/src/app/composables/router.ts b/packages/nuxt/src/app/composables/router.ts index a16dbf7f04b..2ee264d5449 100644 --- a/packages/nuxt/src/app/composables/router.ts +++ b/packages/nuxt/src/app/composables/router.ts @@ -119,9 +119,15 @@ export const abortNavigation = (err?: string | Partial) => { export const setPageLayout = (layout: string) => { if (process.server) { + if (process.dev && getCurrentInstance() && useState('_layout').value !== layout) { + console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout on the server within a component as this will cause hydration errors.') + } useState('_layout').value = layout } const nuxtApp = useNuxtApp() + if (process.dev && nuxtApp.isHydrating && useState('_layout').value !== layout) { + console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout during hydration as this will cause hydration errors.') + } const inMiddleware = isProcessingMiddleware() if (inMiddleware || process.server || nuxtApp.isHydrating) { const unsubscribe = useRouter().beforeResolve((to) => {