現在進行中のNuxt.jsを使ったプロジェクトで横スクロールスライダーのによく使っているswiper.jsをNuxtでもということで導入してみました。

vue-awesome-swiper github

まずはプロジェクトにインストール

npmでサクッとインストール。

#npm install vue-awesome-swiper --save

プラグインファイルの作成

swiperを動作させるためのプラグインファイルを作成、保存します。

【plugins/vue-awsome-swiper.js】

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

CSSと作成したプラグインファイルの読み込み

プラグインファイルとCSSを共通ファイルで読み込みます。

【nuxt.config.js】

css: [
	'swiper/dist/css/swiper.css'
],
--------------------------------------------------
plugins: [
	'~plugins/vue-awesome-swiper',
],

コンポーネントにコードを記述

コンポーネントにコードを描いていきます。
プラグインの読み込みによってswiperタグとswiper-slideのタグが認識されスライダーとして出力されます。
また、スライドのオプションはswiper.jsと同じ記述で動作しレスポンシブ対応も問題なく動作しました。

【components/foo.vue】

Nuxtでも簡単にいつも使っている画像スライダーを導入することができました。
Nuxt.jsで使えるスライダー、awesome-swiper.jsの導入でした。