feat: built-in client only component (#1853)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

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)
+    }
+  }
+})

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)
   }