第一次提交

src/ssr/ClientOnly.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { useClientOnlyStore } from './clientOnlyStore.js'
+const clientOnlyStore = useClientOnlyStore()
+</script>
+<template data-allow-mismatch>
+  <template v-if="clientOnlyStore.isClient" data-allow-mismatch>
+    <slot></slot>
+  </template><template v-else>
+    <slot name="ssr" data-allow-mismatch></slot>
+  </template>
+</template>
+

src/ssr/ClientOnly1.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref, onMounted, useSlots } from 'vue'
+
+const isClient = ref(false)
+const slots = useSlots()
+
+onMounted(() => {
+  isClient.value = true
+})
+/*
+USe:
+<ClientOnly>
+	<template #ssr>
+		SSR Content
+	</template>
+	Real Content
+</ClientOnly>
+*/
+</script>
+
+<template data-allow-mismatch>
+  <template v-if="isClient" data-allow-mismatch><slot></slot></template>
+  <template v-else><slot name="ssr" data-allow-mismatch></slot></template>
+</template>
+

src/ssr/clientOnlyStore.js

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useClientOnlyStore = defineStore('ClientOnly', () => {
+	const isClient = ref(false)
+	function setClient() { isClient.value = true }
+	return {
+		isClient,
+		setClient
+	}
+})

src/ssr/useInitialState.js

@@ -0,0 +1,9 @@
+export function getInitialState(key) {
+  if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
+    if (window.__INITIAL_STATE__[key] !== undefined) {
+      let value = window.__INITIAL_STATE__[key]
+      delete window.__INITIAL_STATE__[key]
+      return value
+    }
+  }
+}