swipe async component

+import Vue from 'vue';
+
+async function getComponent() {
+    return [
+        await import(/* webpackChunkName: "swiper" */'vue-awesome-swiper/dist/ssr'),
+        await import(/* webpackChunkName: "swiper" */'swiper/dist/css/swiper.css')];
+}
+
+export default function AwesomeSwiper() {
+    return {
+        component: new Promise(async (resolve) => {
+            if (process.env.VUE_ENV === 'client') {
+                Vue.use((await getComponent())[0]);
+            }
+            resolve({
+                props: {
+                    options: {
+                        type: Object,
+                        default() {
+                            return {};
+                        }
+                    },
+                    name: String
+                },
+                render: function(h) {
+                    return h('div', {
+                        directives: [{
+                            name: 'swiper',
+                            arg: this.name,
+                            value: this.options
+                        }]
+                    }, this.$slots.default);
+                }
+            });
+        }),
+    };
+}

@@ -2,10 +2,12 @@ import HeaderBox from './header-box';
 import LayoutBody from './layout-body';
 import LazyHtml from './lazy-html';
 import Scroller from './scroller';
+import AwesomeSwiper from './awesome-swiper';
 
 export default {
     HeaderBox,
     LayoutBody,
     LazyHtml,
-    Scroller
+    Scroller,
+    AwesomeSwiper
 };

 <template>
     <div class="focus-image">
-        <div v-swiper:mySwiper="swiperOption" class="swipe">
+        <awesome-swiper name="mySwiper" :options="swiperOption" class="swipe">
             <div class="swiper-wrapper">
                 <div class="swiper-slide" v-for="focus in value" :style="{backgroundColor: focus.bgColor}">
                     <a-link :href="focus.url">
@@ -8,19 +8,10 @@
                     </a-link>
                 </div>
             </div>
-            <div class="swiper-pagination"></div>
-        </div>
+        </awesome-swiper>
     </div>
 </template>
 
-<client>
-    import Vue from 'vue';
-    import('swiper/dist/css/swiper.css');
-    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr');
-
-    Vue.use(VueAwesomeSwiper);
-</client>
-
 <script>
     import Resource from './resource';
 

 <template>
     <div class="image-swipe">
         <div class="swipe-wrap" @click.prevent="showcase()">
-            <div v-swiper:mySwiper="swiperOption" ref="mySwiper" v-if="reload">
+            <awesome-swiper name="mySwiper" :options="swiperOption" ref="mySwiper" v-if="reload">
                 <div class="swiper-wrapper">
                     <div class="swiper-slide" v-for="item in goodsList" :key="item.goods_id">
                         <img :src="item.color_image" alt="">
                     </div>
                 </div>
-            </div>
+            </awesome-swiper>
             <div class="swipe-mask" v-show="!show">
                 <div class="item left"></div>
                 <div class="item middle"></div>
@@ -22,13 +22,6 @@
         </div>
     </div>
 </template>
-<client>
-import Vue from 'vue';
-import('swiper/dist/css/swiper.css');
-const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr');
-
-Vue.use(VueAwesomeSwiper);
-</client>
 <script>
 import _ from 'lodash/core';
 import {getImgUrl} from 'common/utils';