refactor(client): resolve root components outside of render function

e2e/docs/.vuepress/client.ts

@@ -1,5 +1,6 @@
 import { defineClientConfig } from 'vuepress/client'
+import RootComponentFromUserConfig from './components/RootComponentFromUserConfig.vue'
 
 export default defineClientConfig({
-  //
+  rootComponents: [RootComponentFromUserConfig],
 })

e2e/docs/.vuepress/components/RootComponentFromUserConfig.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="root-component-from-user-config">
+    <p>root component from user config</p>
+  </div>
+</template>

e2e/docs/.vuepress/theme/client/components/RootComponentFromTheme.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="root-component-from-theme">
+    <p>root component from theme</p>
+  </div>
+</template>

e2e/docs/.vuepress/theme/client/config.ts

@@ -1,4 +1,5 @@
 import { defineClientConfig } from 'vuepress/client'
+import RootComponentFromTheme from './components/RootComponentFromTheme.vue'
 import CustomLayout from './layouts/CustomLayout.vue'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
@@ -19,4 +20,6 @@ export default defineClientConfig({
     Layout,
     NotFound,
   },
+
+  rootComponents: [RootComponentFromTheme],
 })

e2e/tests/client-config/root-components.cy.ts

@@ -0,0 +1,15 @@
+it('should render root components correctly', () => {
+  cy.visit('/')
+
+  cy.get('.root-component-from-theme').should('exist')
+  cy.get('.root-component-from-theme p').should(
+    'have.text',
+    'root component from theme',
+  )
+
+  cy.get('.root-component-from-user-config').should('exist')
+  cy.get('.root-component-from-user-config p').should(
+    'have.text',
+    'root component from user config',
+  )
+})

packages/client/src/app.ts

@@ -27,14 +27,16 @@ export const createVueApp: CreateVueAppFunction = async () => {
         clientConfig.setup?.()
       }
 
+      // get all root components
+      const rootComponents = clientConfigs.flatMap(
+        ({ rootComponents = [] }) => rootComponents,
+      )
+
+      // get page layout
       const layout = usePageLayout()
 
-      return () => [
-        h(layout.value),
-        ...clientConfigs.flatMap(({ rootComponents = [] }) =>
-          rootComponents.map((component) => h(component)),
-        ),
-      ]
+      // render layout and root components
+      return () => [h(layout.value), rootComponents]
     },
   })