Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-18 09:25:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
Anthony Fu 2021-11-15 19:57:38 +08:00 committed by GitHub
parent 934db6b584
commit 8e12394e2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/nuxt3/src/app/components/client-only.mjs Normal file
View File

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

6
packages/nuxt3/src/core/nuxt.ts
View File

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