add <ClientOnly> and note on browser API access

docs/.vuepress/components/Foo.vue

+<template>
+  <h1>fooooo</h1>
+</template>
+
+<script>
+export default {
+  created () {
+    import('./non-browser-firendly.js').then(m => {
+      console.log('imported!!!')
+    })
+  }
+}
+</script>

docs/.vuepress/components/non-browser-firendly.js

+console.log(document.querySelector('h1'))

docs/guide/custom-themes.md

 # Custom Themes
 
+::: tip
+Theme components are subject to the same [browser API access restrictions](./using-vue.md#browser-api-access-restrictions).
+:::
+
 VuePress uses Vue single file components for custom themes. To use a custom layout, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
 
 ```

docs/guide/using-vue.md

 # Using Vue in Markdown
 
-## DOM Access Restrictions
+## Browser API Access Restrictions
 
 Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMounted` or `mounted` hooks.
 
+If you are using or demoing a component that is not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
+
+``` md
+<ClientOnly>
+  <NonSSRFriendlyComponent/>
+</ClientOnly>
+```
+
+Note this does not fix components or libraries that access Browser APIs **on import** - in order to use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:
+
+``` vue
+<script>
+export default {
+  mounted () {
+    import('./lib-that-access-window-on-import').then(module => {
+      // use code
+    })
+  }
+}
+</script>
+```
+
 ## Templating
 
 ### Interpolation

lib/app/ClientOnly.js

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

lib/app/app.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import Content from './Content'
+import ClientOnly from './ClientOnly'
 import NotFound from '~notFound'
 import dataMixin from './dataMixin'
 import { routes } from './.temp/routes'
@@ -27,6 +28,9 @@ Vue.mixin(dataMixin)
 // component for rendering markdown content and setting title etc.
 Vue.component('Content', Content)
 
+// component for client-only content
+Vue.component('ClientOnly', ClientOnly)
+
 // global helper for adding base path to absolute urls
 Vue.prototype.$withBase = function (path) {
   const base = this.$site.base