diff --git a/src/entry-server.js b/src/entry-server.js index 1742ef0..f695cee 100644 --- a/src/entry-server.js +++ b/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() diff --git a/src/ssr/utils/registerFakeClientComponents.js b/src/ssr/utils/registerFakeClientComponents.js new file mode 100644 index 0000000..91cce62 --- /dev/null +++ b/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: '
' + }) + + filePaths.forEach((path) => { + const componentName = path + .split('/') + .pop() + .replace(/\.client.\w+$/, '') + + app.component(componentName, vueComponent) + }) +}