From d14551b213784f9f145fa5eddb8b4729e76b2f69 Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Sat, 29 Jan 2022 20:05:39 +0300
Subject: [PATCH] Async component

---
 README.md    | 16 +++++++++++++++-
 src/Demo.vue | 14 ++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index adc598b..5c896eb 100644
--- a/README.md
+++ b/README.md
@@ -17,9 +17,23 @@ $ npm install github:anatolykopyl/vue-three-d-mockup
 />
 ```
 
+#### Use as an async component (the 3d model is quite large so this provides a significant performance boost):
 ```js
 <script>
-import Mockup from 'vue-tree-d-mockup'
+import { defineAsyncComponent } from 'vue';
+
+export default {
+  components: {
+    Mockup: defineAsyncComponent(() => import('vue-three-d-mockup')),
+  }
+}
+</script>
+```
+
+#### Or normally:
+```js
+<script>
+import Mockup from 'vue-three-d-mockup';
 
 export default {
   components: {
diff --git a/src/Demo.vue b/src/Demo.vue
index 784445a..16af979 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -1,16 +1,18 @@
 <template>
-  <Mockup
-    class="mockup"
-    screenImg="screen.png"
-  />
+  <div>
+    <Mockup
+      class="mockup"
+      screenImg="screen.png"
+    />
+  </div>
 </template>
 
 <script>
-import Mockup from './Mockup.vue';
+import { defineAsyncComponent } from 'vue';
 
 export default {
   components: {
-    Mockup,
+    Mockup: defineAsyncComponent(() => import('./Mockup.vue')),
   },
 };
 </script>