From 4d03b81c5518f6e5f8414e1c756eb55c8db3827d Mon Sep 17 00:00:00 2001
From: Gary Chou <gary@manja.org>
Date: Mon, 30 Sep 2019 09:34:52 -0400
Subject: [PATCH 1/3] Code block to dynamically register a component

As someone relatively new to JS + Vue, the existing sample code for dynamic imports didn't tell me how to actually register the component dynamically, which is the likely case for importing a module.

The proposed code block does both: it dynamically imports the module and also registers the component.
---
 packages/docs/docs/guide/using-vue.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/docs/docs/guide/using-vue.md b/packages/docs/docs/guide/using-vue.md
index 923bb30004..0f01e056a2 100644
--- a/packages/docs/docs/guide/using-vue.md
+++ b/packages/docs/docs/guide/using-vue.md
@@ -26,6 +26,18 @@ export default {
 </script>
 ```
 
+or
+
+``` vue
+<script>
+export default {
+  components: {
+    'module': () => import('name of module')
+  }
+}
+</script>
+```
+
 ## Templating
 
 ### Interpolation

From 9a8f995d84d59c58534dd24728e9f91a15be5094 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 5 Oct 2019 13:24:58 +0800
Subject: [PATCH 2/3] docs: register non-ssr-friendly components

Using dynamic components to register non-ssr-friendly components.
---
 packages/docs/docs/guide/using-vue.md | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/docs/docs/guide/using-vue.md b/packages/docs/docs/guide/using-vue.md
index 0f01e056a2..83a077b7c2 100644
--- a/packages/docs/docs/guide/using-vue.md
+++ b/packages/docs/docs/guide/using-vue.md
@@ -26,18 +26,35 @@ export default {
 </script>
 ```
 
-or
+If your module `export default` a Vue component, you can register it dynamically:
+
+```vue
+<template>
+  <component v-if="currentTabComponent" :is="currentTabComponent"></component>
+</template>
 
-``` vue
 <script>
 export default {
-  components: {
-    'module': () => import('name of module')
+  data() {
+    return {
+      dynamicComponent: null
+    }
+  },
+
+  mounted () {
+    import('./lib-that-access-window-on-import').then(module => {
+      this.dynamicComponent = module.default
+    })
   }
 }
 </script>
 ```
 
+**Also see:**
+
+- [Vue.js > Dynamic Components](https://vuejs.org/v2/guide/components.html#Dynamic-Components)
+
+
 ## Templating
 
 ### Interpolation

From 2fb9adbb0fbe09e167e4a5c13b5673fec2bd73d6 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 5 Oct 2019 13:27:17 +0800
Subject: [PATCH 3/3] chore: tweaks

---
 packages/docs/docs/guide/using-vue.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/docs/guide/using-vue.md b/packages/docs/docs/guide/using-vue.md
index 83a077b7c2..d200c45221 100644
--- a/packages/docs/docs/guide/using-vue.md
+++ b/packages/docs/docs/guide/using-vue.md
@@ -30,7 +30,7 @@ If your module `export default` a Vue component, you can register it dynamically
 
 ```vue
 <template>
-  <component v-if="currentTabComponent" :is="currentTabComponent"></component>
+  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
 </template>
 
 <script>