From 8e12394e2d30299c95fa44f8ccf13158920839e1 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 15 Nov 2021 19:57:38 +0800
Subject: [PATCH] feat: built-in client only component (#1853)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
---
 .../nuxt3/src/app/components/client-only.mjs  | 19 +++++++++++++++++++
 packages/nuxt3/src/core/nuxt.ts               |  6 ++++++
 2 files changed, 25 insertions(+)
 create mode 100644 packages/nuxt3/src/app/components/client-only.mjs

diff --git a/packages/nuxt3/src/app/components/client-only.mjs b/packages/nuxt3/src/app/components/client-only.mjs
new file mode 100644
index 0000000000..45054c56b3
--- /dev/null
+++ b/packages/nuxt3/src/app/components/client-only.mjs
@@ -0,0 +1,19 @@
+import { ref, onMounted, defineComponent, createElementBlock } from 'vue'
+
+export default defineComponent({
+  name: 'ClientOnly',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['fallback', 'placeholder', 'placeholderTag', 'fallbackTag'],
+  setup (_, { slots }) {
+    const mounted = ref(false)
+    onMounted(() => { mounted.value = true })
+    return (props) => {
+      if (mounted.value) { return slots.default?.() }
+      const slot = slots.fallback || slots.placeholder
+      if (slot) { return slot() }
+      const fallbackStr = props.fallback || props.placeholder || ''
+      const fallbackTag = props.fallbackTag || props.placeholderTag || 'span'
+      return createElementBlock(fallbackTag, null, fallbackStr)
+    }
+  }
+})
diff --git a/packages/nuxt3/src/core/nuxt.ts b/packages/nuxt3/src/core/nuxt.ts
index 5eaa1f63ae..4a489e07df 100644
--- a/packages/nuxt3/src/core/nuxt.ts
+++ b/packages/nuxt3/src/core/nuxt.ts
@@ -58,6 +58,12 @@ async function initNuxt (nuxt: Nuxt) {
     filePath: resolve(nuxt.options.appDir, 'components/nuxt-welcome.vue')
   })
 
+  // Add <ClientOnly>
+  addComponent({
+    name: 'ClientOnly',
+    filePath: resolve(nuxt.options.appDir, 'components/client-only')
+  })
+
   for (const m of modulesToInstall) {
     await installModule(nuxt, m)
   }