Skip to content

Commit

Permalink
feat: built-in ClientOnly component
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Dec 5, 2020
1 parent 9bd79e8 commit 8809d2d
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 4 deletions.
11 changes: 11 additions & 0 deletions src/client/app/components/ClientOnly.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { ref, onMounted, defineComponent } from 'vue'

export const ClientOnly = defineComponent({
setup(_, { slots }) {
const show = ref(false)
onMounted(() => {
show.value = true
})
return () => (show.value && slots.default ? slots.default() : null)
}
})
6 changes: 3 additions & 3 deletions src/client/app/components/Content.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { h } from 'vue'
import { defineComponent, h } from 'vue'
import { useRoute } from '../router'

export const Content = {
export const Content = defineComponent({
name: 'VitePressContent',
setup() {
const route = useRoute()
return () => (route.component ? h(route.component) : null)
}
}
})
3 changes: 2 additions & 1 deletion src/client/app/mixin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { SiteDataRef } from './composables/siteData'
import { PageDataRef } from './composables/pageData'
import { Content } from './components/Content'
import Debug from './components/Debug.vue'
import { ClientOnly } from './components/ClientOnly'

export function mixinGlobalComputed(
app: App,
Expand Down Expand Up @@ -68,6 +69,6 @@ export function mixinGlobalComponents(app: App) {
const isProd = process.env.NODE_ENV === 'production'

app.component('Content', Content)

app.component('ClientOnly', ClientOnly)
app.component('Debug', isProd ? () => null : Debug)
}

1 comment on commit 8809d2d

@vercel
Copy link

@vercel vercel bot commented on 8809d2d Dec 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.