feat: add vue-carousel of npm module and example

Author: hisasann

nuxt.config.ts

@@ -97,7 +97,8 @@ module.exports = {
     '@/plugins/constants-inject.ts',
     '@/plugins/env-inject.ts',
     '@/plugins/vue-lazyload.ts',
-    '@/plugins/i18n.ts'
+    '@/plugins/i18n.ts',
+    { src: '@/plugins/vue-carousel.ts', ssr: false }
   ],
 
   /*

package.json

@@ -64,6 +64,7 @@
     "nuxt-env": "^0.1.0",
     "nuxt-property-decorator": "^2.1.3",
     "ts-node": "^8.1.0",
+    "vue-carousel": "^0.18.0",
     "vue-i18n": "^8.10.0",
     "vue-lazyload": "^1.2.6"
   },

src/pages/example/index.vue

@@ -49,6 +49,8 @@ section
     nuxt-link(to='/example/animejs') animejs
   p
     nuxt-link(to='/example/now-utcoffset') now-utcoffset
+  p
+    nuxt-link(to='/example/vue-carousel') vue-carousel
 </template>
 
 <script lang="ts">

src/pages/example/vue-carousel.vue

@@ -0,0 +1,56 @@
+<template lang="pug">
+section.container
+  h1.title
+    | vue-carousel
+  div.example
+    carousel(:navigationEnabled='true', :perPage='2')
+      slide(v-for='i in loopCounter', :key='i', :data-index='i' @slideclick='handleSlideClick')
+        span.label
+          | {{i}}<img src='~/assets/images/lemon-sour.small.jpg'>
+  p {{clickCounter}}
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+// https://qiita.com/gakumac/items/cc3f1bb0dfcbbefa1eeb
+import Carousel from 'vue-carousel/src/Carousel.vue'
+import Slide from 'vue-carousel/src/Slide.vue'
+
+@Component({
+  components: {
+    Carousel,
+    Slide
+  }
+})
+export default class extends Vue {
+  public loopCounter: number = 10
+  public clickCounter: string = ''
+
+  public handleSlideClick(dataset) {
+    console.log(dataset.index)
+    this.clickCounter = dataset.index + ' click!'
+  }
+
+  public head() {
+    return {
+      title: 'vue-carousel'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.VueCarousel-slide {
+  position: relative;
+  background: #42b983;
+  color: #fff;
+  font-family: Arial;
+  font-size: 24px;
+  text-align: center;
+  min-height: 100px;
+  height: 300px;
+}
+
+.label {
+}
+</style>

src/plugins/vue-carousel.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueCarousel from 'vue-carousel'
+
+Vue.use(VueCarousel)

yarn.lock

@@ -12296,6 +12296,15 @@ void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-carousel@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/vue-carousel/-/vue-carousel-0.18.0.tgz#478dfcad3abe2ee44c227020b6e60fb8484dc9f1"
+  integrity sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==
+  dependencies:
+    global "^4.3.2"
+    regenerator-runtime "^0.12.1"
+    vue "^2.5.17"
+
 [email protected]:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.0.1.tgz#7af2225c600667c7042b60712eefdf41dfc6de63"
@@ -12420,7 +12429,7 @@ vue@^2.0.0:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.8.tgz#f21cbc536bfc14f7d1d792a137bb12f69e60ea91"
 
-vue@^2.6.10:
+vue@^2.5.17, vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==