Create fake client components for SSR

src/entry-server.js

@@ -4,12 +4,16 @@ import { createApp } from './main'
 import { registerGlobalComponents } from '@/components/globalComponents'
 import { getActiveHead } from 'unhead'
 import { renderSSRHead } from '@unhead/ssr'
+import { registerFakeClientComponents } from '@/ssr/utils/registerFakeClientComponents'
 import devalue from '@nuxt/devalue'
 
 export async function render(url, manifest) {
   const { app, router, store } = createApp()
 
+  // Register global components, create a fake server components for components that should only render on client side
   registerGlobalComponents(app)
+  registerFakeClientComponents(app)
+
   // set the router to the desired URL before rendering
   await router.push(url)
   await router.isReady()

src/ssr/utils/registerFakeClientComponents.js

@@ -0,0 +1,18 @@
+import { defineComponent } from 'vue'
+import glob from 'glob'
+
+export function registerFakeClientComponents(app) {
+  const filePaths = glob.sync('src/components/**/*.client.vue')
+  const vueComponent = defineComponent({
+    template: '<div></div>'
+  })
+
+  filePaths.forEach((path) => {
+    const componentName = path
+      .split('/')
+      .pop()
+      .replace(/\.client.\w+$/, '')
+
+    app.component(componentName, vueComponent)
+  })
+}