feat: Export ClientOnly in Vue

examples/vue/src/main.js

@@ -1,7 +1,7 @@
 import './index.css'
 import App from './App.vue'
 import routes from './routes'
-import viteSSR from 'vite-ssr'
+import viteSSR, { ClientOnly } from 'vite-ssr'
 import { createHead } from '@vueuse/head'
 
 // This piece will move route.meta.state to Page props.
@@ -17,6 +17,8 @@ export default viteSSR(
     const head = createHead()
     app.use(head)
 
+    app.component(ClientOnly.name, ClientOnly)
+
     // The 'initialState' is hydrated in the browser and can be used to
     // pass it to Vuex, for example, if you prefer to rely on stores rather than page props.
     // In the server, 'initialState' is an empty object that can be mutated. It can be

src/index.d.ts

@@ -21,4 +21,5 @@ declare module 'vite-ssr' {
   ) => any
 
   export default handler
+  export const ClientOnly: any
 }

src/vue/entry-client.d.ts

@@ -23,4 +23,5 @@ declare module 'vite-ssr/vue/entry-client' {
   ) => HookResponse | Promise<HookResponse>
 
   export default handlerClient
+  export const ClientOnly: typeof Vue
 }

src/vue/entry-client.js

@@ -1,16 +1,18 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import { getFullPath, withoutSuffix } from '../utils/route'
+export { ClientOnly } from '../components.mjs'
 
 export default async function (App, { routes, base, debug = {} } = {}, hook) {
+  const app = createApp(App)
+
   const url = window.location
   const routeBase = base && withoutSuffix(base({ url }), '/')
   const router = createRouter({
     history: createWebHistory(routeBase),
     routes,
   })
 
-  const app = createApp(App)
   app.use(router)
 
   let entryRouteName

src/vue/entry-server.d.ts

@@ -33,4 +33,5 @@ declare module 'vite-ssr/vue/entry-server' {
   ) => Promise<Renderer>
 
   export default handlerSSR
+  export const ClientOnly: typeof Vue
 }

src/vue/entry-server.js

@@ -4,18 +4,19 @@ import { createRouter, createMemoryHistory } from 'vue-router'
 import { createUrl, getFullPath, withoutSuffix } from '../utils/route'
 import { parseHTML, findDependencies, renderPreloadLinks } from '../utils/html'
 import { renderHeadToString } from '@vueuse/head'
+export { ClientOnly } from '../components.mjs'
 
 export default function (App, { routes, base }, hook) {
   return async function (url, { manifest, preload = false, ...extra } = {}) {
-    url = createUrl(url)
+    const app = createSSRApp(App)
 
+    url = createUrl(url)
     const routeBase = base && withoutSuffix(base({ url }), '/')
     const router = createRouter({
       history: createMemoryHistory(routeBase),
       routes,
     })
 
-    const app = createSSRApp(App)
     app.use(router)
 
     // This can be injected with useSSRContext() in setup functions

src/vue/index.d.ts

@@ -23,4 +23,5 @@ declare module 'vite-ssr/vue' {
   ) => Promise<void>
 
   export default handlerClient
+  export const ClientOnly: typeof Vue
 }