feat: make Layout setting cumulative

BREAKING CHANGE: The `Layout` setting cannot be overriden anymore because it's now cumulative, see: - https://vike.dev/Layout#multiple-layouts - https://vike.dev/Layout#nested-layouts
vikejs · Jun 13, 2024 · 346981c · 346981c
1 parent 3ca6aa3
commit 346981c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/packages/vike-vue/src/+config.ts b/packages/vike-vue/src/+config.ts
@@ -60,6 +60,7 @@ export default {
     },
     Layout: {
       env: { server: true, client: true },
+      cumulative: true,
     },
     title: {
       env: { server: true, client: true },

diff --git a/packages/vike-vue/src/renderer/createVueApp.ts b/packages/vike-vue/src/renderer/createVueApp.ts
@@ -12,18 +12,19 @@ import { setData } from '../hooks/useData'
 type ChangePage = (pageContext: PageContext) => Promise<void>
 async function createVueApp(pageContext: PageContext, ssr: boolean, mainComponentName: 'Head' | 'Page') {
   const mainComponentRef = ref(markRaw(pageContext.config[mainComponentName]))
-  const layoutRef = ref(markRaw(pageContext.config.Layout))
+  const layoutRef = ref(markRaw(pageContext.config.Layout || []))
 
   const MainComponent = () => h(mainComponentRef.value)
   let RootComponent = MainComponent
   // Wrap <Page> with <Layout>
   if (mainComponentName === 'Page') {
     RootComponent = () => {
-      if (!layoutRef.value) {
-        return MainComponent()
-      } else {
-        return h(layoutRef.value, null, MainComponent)
-      }
+      let RootComp = MainComponent
+      layoutRef.value.forEach((layout) => {
+        const Comp = RootComp
+        RootComp = () => h(layout, null, Comp)
+      })
+      return RootComp()
     }
   }
 
@@ -46,7 +47,7 @@ async function createVueApp(pageContext: PageContext, ssr: boolean, mainComponen
     objectReplace(dataReactive, data)
     objectReplace(pageContextReactive, pageContext)
     mainComponentRef.value = markRaw(pageContext.config[mainComponentName])
-    layoutRef.value = markRaw(pageContext.config.Layout)
+    layoutRef.value = markRaw(pageContext.config.Layout || [])
     await nextTick()
     returned = true
     if (err) throw err

diff --git a/packages/vike-vue/src/types/PageContext.ts b/packages/vike-vue/src/types/PageContext.ts
@@ -36,6 +36,7 @@ declare global {
       onBeforeRenderClient?: Array<OnBeforeRenderClientSync | OnBeforeRenderClientAsync>
       bodyHtmlStart?: BodyInjectHtml[]
       bodyHtmlEnd?: BodyInjectHtml[]
+      Layout?: Component[]
     }
   }
 }