［Nuxt］［Vue］スワイプ動作の実装にはvue-swipeが便利！

f:id:jyouj:20181124165447p:plain

スワイプ動作を実装したいなー、というときありませんか？次から次にコンテンツが見れるようにしたい。そんな時は、vue-swipeというプラグインが便利なので、紹介したいと思います。Nuxtを使っています。Vueでもそんなに難しくないですよ。

導入

Githubに詳しく書かれていますが、さらっと。

$ npm install vue-swipe

nuxt.config.jsにプラグインを記述します。

plugins: [{ src: '~plugins/vue-swipe', ssr: false }],

plugins/vue-swipe.jsに記述して、使えるようにします。

import Vue from 'vue'
import { Swipe, SwipeItem } from 'vue-swipe'
import 'vue-swipe/dist/vue-swipe.css'

Vue.component('swipe', Swipe)
Vue.component('swipe-item', SwipeItem)

実装

あとは簡単にpages/index.vueに実装していきましょう。

<template>
  <div>
    <swipe class="my-swipe">
       <swipe-item class="slide1"></swipe-item>
       <swipe-item class="slide2"></swipe-item>
       <swipe-item class="slide3"></swipe-item>
    </swipe>
  </div>
</template>

<style>
.my-swipe {
  height: 200px;
}
</style>