Merge pull request #19 from hisasann/feature/add-vue-awesome-swiper

feat: add vue-awesome-swiper

Author: hisasann

nuxt.config.ts

@@ -121,7 +121,11 @@ const config: NuxtConfiguration = {
    * Global CSS
    * 他の scss ファイルに依存しない scss はこちらに
    */
-  css: ['@/assets/styles/reset.scss', '@/assets/styles/main.scss'],
+  css: [
+    '@/assets/styles/reset.scss',
+    '@/assets/styles/main.scss',
+    'swiper/dist/css/swiper.css'
+  ],
 
   /**
    * Plugins to load before mounting the App
@@ -132,7 +136,8 @@ const config: NuxtConfiguration = {
     '@/plugins/libraries/axios.ts',
     '@/plugins/libraries/vue-lazyload.ts',
     '@/plugins/locale/i18n.ts',
-    { src: '@/plugins/libraries/vue-carousel.ts', ssr: false }
+    { src: '@/plugins/libraries/vue-carousel.ts', ssr: false },
+    { src: '@/plugins/libraries/vue-awesome-swiper', mode: 'client' }
   ],
 
   /*

package.json

@@ -51,6 +51,8 @@
     "@nuxtjs/axios": "^5.5.3",
     "@nuxtjs/pwa": "^3.0.0-beta.14",
     "@nuxtjs/sentry": "^3.0.0",
+    "@types/shortid": "^0.0.29",
+    "@types/swiper": "^4.4.3",
     "@types/webpack": "^4.4.32",
     "@ungap/url-search-params": "^0.1.2",
     "animejs": "^3.0.1",
@@ -63,8 +65,11 @@
     "nuxt-client-init-module": "^0.1.4",
     "nuxt-env": "^0.1.0",
     "nuxt-property-decorator": "^2.1.3",
+    "shortid": "^2.2.14",
     "throttle-debounce": "^2.1.0",
     "ts-node": "^8.2.0",
+    "vee-validate": "^2.2.9",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-carousel": "^0.18.0",
     "vue-i18n": "^8.11.2",
     "vue-lazyload": "^1.2.6"

src/pages/example/index.vue

@@ -57,6 +57,8 @@ section
     nuxt-link(to='/example/routing-validate/false') routing-validate - validate is not true
   p
     nuxt-link(to='/example/v-scroll') v-scroll
+  p
+    nuxt-link(to='/example/vue-awesome-swiper') vue-awesome-swiper
 </template>
 
 <script lang="ts">

src/pages/example/vue-awesome-swiper.vue

@@ -0,0 +1,121 @@
+<template lang="pug">
+div
+  div(v-swiper:swiper="swiperOption")
+    .swiper-wrapper
+      .swiper-slide(v-for="banner in banners")
+        img(:src="banner")
+    ul.swiper-pagination.swiper-pagination-bullets(:data-component-id="componentId" ref="pagination")
+    .swiper-button-next(slot="button-next")
+    .swiper-button-prev(slot="button-prev")
+
+  span(@click="prev", slot="button-prev") 左
+  span(@click="next", slot="button-next") 右
+
+  div.space
+
+  p activeIndex: {{activeIndex}}
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import shortid from 'shortid'
+import Swiper from 'swiper'
+// @ts-ignore
+import LemonSourSmallImage from '@/assets/images/lemon-sour.small.jpg'
+
+@Component
+export default class VueAwesomeSwiper extends Vue {
+  public banners: string[] = [
+    LemonSourSmallImage,
+    LemonSourSmallImage,
+    LemonSourSmallImage,
+    require('@/assets/images/lemon-sour.small.jpg'),
+    require('@/assets/images/lemon-sour.small.jpg'),
+    require('@/assets/images/lemon-sour.small.jpg')
+  ]
+
+  public activeIndex: number = 0
+
+  /** コンポーネントのID */
+  public componentId: string = shortid.generate()
+
+  /** Swiperの設定 */
+  public swiperOption = {}
+
+  /** Swiperのインスタンス */
+  private swiper: Swiper
+
+  /** ライフサイクル */
+  public beforeMount(): void {
+    // ページマウント直前のcomponentIdを使ってカルーセルを設定
+    this.swiperOption = {
+      // loop: true,
+      slidesPerView: 3,
+      spaceBetween: 30,
+      slidesPerGroup: 3,
+      pagination: {
+        el: `.swiper-pagination-bullets[data-component-id="${
+          this.componentId
+        }"]`,
+        clickable: true,
+        bulletElement: 'li'
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev'
+      }
+    } as Swiper['params']
+  }
+
+  public next(e) {
+    console.log('next', this.swiper.activeIndex)
+    this.swiper.slideNext(500)
+    this.activeIndex = this.swiper.activeIndex
+  }
+
+  public prev(e) {
+    console.log('prev', this.swiper.activeIndex)
+    this.swiper.slidePrev(500)
+    this.activeIndex = this.swiper.activeIndex
+  }
+
+  public mounted() {
+    console.log('this is current swiper instance object', this.swiper)
+    // this.swiper.slideTo(2, 1000, false)
+  }
+
+  public head() {
+    return {
+      title: 'vue-awesome-swiper'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.swiper-container {
+  margin-bottom: 10px;
+  .swiper-wrapper {
+    height: 300px;
+    width: 100%;
+    .swiper-slide {
+      text-align: center;
+      font-size: 38px;
+      font-weight: 700;
+      background-color: #eee;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .swiper-pagination {
+      > .swiper-pagination-bullet {
+        background-color: red;
+      }
+    }
+  }
+}
+
+.space {
+  margin: 5px 0 5px 0;
+}
+</style>

src/plugins/libraries/vue-awesome-swiper.ts

@@ -0,0 +1,9 @@
+/**
+ * @file vue-awesome-swiperをグローバルに登録する
+ * @see https://github.com/surmon-china/vue-awesome-swiper/tree/master/examples/nuxt-ssr-example
+ */
+
+import Vue from 'vue'
+import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
+
+Vue.use(VueAwesomeSwiper)

yarn.lock

@@ -2256,6 +2256,11 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
+"@types/shortid@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/shortid/-/shortid-0.0.29.tgz#8093ee0416a6e2bf2aa6338109114b3fbffa0e9b"
+  integrity sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -2279,6 +2284,11 @@
   resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
   integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
 
+"@types/swiper@^4.4.3":
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/@types/swiper/-/swiper-4.4.3.tgz#8f02e14b77ed51da563fb7cf669b7beb6d397451"
+  integrity sha512-z4RRt3/4ERHizeU8qIKmUsUpmoXFeEAJu0WLBZtjoVczaCnNL0KYQX0aBFZNhEu3bSNlMfWbZSHrg5gqAIucNA==
+
 "@types/tapable@*":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@@ -5183,6 +5193,13 @@ dom-walk@^0.1.0:
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
   integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
 
+dom7@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-2.1.3.tgz#a736f9c3bfbc4ca039a81cd095f97d1d7f3de19c"
+  integrity sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==
+  dependencies:
+    ssr-window "^1.0.1"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -8934,6 +8951,11 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
+nanoid@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.0.3.tgz#dde999e173bc9d7bd2ee2746b89909ade98e075e"
+  integrity sha512-NbaoqdhIYmY6FXDRB4eYtDVC9Z9eCbn8TyaiC16LNKtpPv/aqa0tOPD8y6gNE4yUNnaZ7LLhYtXOev/6+cBtfw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11993,6 +12015,13 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shortid@^2.2.14:
+  version "2.2.14"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.14.tgz#80db6aafcbc3e3a46850b3c88d39e051b84c8d18"
+  integrity sha512-4UnZgr9gDdA1kaKj/38IiudfC3KHKhDc1zi/HSxd9FQDR0VLwH3/y79tZJLsVYPsJgIjeHjqIWaWVRJUj9qZOQ==
+  dependencies:
+    nanoid "^2.0.0"
+
 sigmund@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -12211,6 +12240,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssr-window@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-1.0.1.tgz#30752a6a4666e7767f0b7e6aa6fc2fdbd0d9b369"
+  integrity sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==
+
 ssri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
@@ -12539,6 +12573,14 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@^4.0.7:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-4.5.0.tgz#4d870bec4f5abe2fb259325849dd2641c9243c0d"
+  integrity sha512-jRCd/CGet9kaHwthHdd/sL/YU8CI157PWLyItnIcn/o/jP4haVky3zTF6f9F3JDpmQIw7jdWihISiYx0/oTHsg==
+  dependencies:
+    dom7 "^2.1.3"
+    ssr-window "^1.0.1"
+
 symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -13280,6 +13322,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vee-validate@^2.2.9:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.2.9.tgz#4d4be9464acb00556cbc5c360f41b7bfd180412f"
+  integrity sha512-+nfg8dwH3rDOg8Y9sZ1TCvFFWXecRxG2L6sZelQECKrqLVjX4/UuFoyezhfPGMTfI6Lx66ygERgeRdOw4S3r4g==
+
 vendors@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"
@@ -13306,6 +13353,14 @@ void-elements@^2.0.1:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
+vue-awesome-swiper@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz#05500b501ffb3fec9bf7eb9985bcf4ae8360ed9e"
+  integrity sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==
+  dependencies:
+    object-assign "^4.1.1"
+    swiper "^4.0.7"
+
 vue-carousel@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/vue-carousel/-/vue-carousel-0.18.0.tgz#478dfcad3abe2ee44c227020b6e60fb8484dc9f1"