feat: add component ClientOnly

packages/saber/vue-renderer/app/components/ClientOnly.js

@@ -0,0 +1,13 @@
+export default {
+  name: 'ClientOnly',
+  functional: true,
+  render (h, { parent, children }) {
+    if (parent._isMounted) {
+      return children
+    } else {
+      parent.$once('hook:mounted', () => {
+        parent.$forceUpdate()
+      })
+    }
+  }
+}

packages/saber/vue-renderer/app/LayoutManager.vue → packages/saber/vue-renderer/app/components/LayoutManager.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'layout-manager',
+  name: 'LayoutManager',
   functional: true,
   inject: ['layouts'],
   render(

packages/saber/vue-renderer/app/create-app.js

@@ -5,13 +5,15 @@ import Vue from 'vue'
 import layouts from '#cache/layouts'
 import createRouter from './router'
 import Meta from './vendor/vue-meta'
-import Layout from './LayoutManager.vue'
+import Layout from './components/LayoutManager.vue'
+import ClientOnly from './components/ClientOnly'
 import extendBrowserApi from '#cache/extend-browser-api'
 import injectConfig from './helpers/inject-config'
 import setTransition from './helpers/set-transition'
 
 Vue.config.productionTip = false
 
+Vue.component(ClientOnly.name, ClientOnly)
 Vue.component(Layout.name, Layout)
 
 Vue.use(Meta, {

website/pages/docs/components.md

@@ -0,0 +1,15 @@
+---
+title: Components
+layout: docs
+---
+
+Saber registered a set of Vue components by default.
+
+## `SaberLink`
+
+A drop-in replacement for Vue Router's `<router-link>` component, we added addtional features like prefetching route components.
+
+## `ClientOnly`
+
+Use this component to wrap non SSR friendly components.
+

website/saber-config.js

@@ -55,6 +55,7 @@ module.exports = {
         title: 'References',
         children: [
           { title: 'Saber Config', link: '/docs/saber-config.html' },
+          { title: 'Built-in Components', link: '/docs/components.html' },
           { title: 'Plugin API', link: '/docs/plugin-api.html' },
           { title: 'Saber Instance', link: '/docs/saber-instance.html' },
           { title: 'Saber Browser APIs', link: '/docs/browser-apis.html' },