NuxtでVueのプラグイン入れるの結構ムズくないか？と思ったので書きました。

環境

Windows10
yarn -v 1.13.0
node -v 8.11.1
vue --version 2.9.6

vue-awesome-swiperを使う

Nuxt.jsのウェルカムページが見られるベースの環境はできているものとします。
そこがまだな方は、こちらの神記事を見れば導入できるでしょう・・・。
Nuxt.jsの開発環境構築の手順（最初の一歩）

また、モードはspa(シングルページアプリケーション)ではなくuniversal(サーバーサイドレンダリング)です。
API: mode プロパティ - Nuxt.js

プロジェクトにaddする

何はともあれ追加よー

yarn add vue-awesome-swiper

pluginsフォルダに追加する

pluginsフォルダの中に、jsファイルを新規作成します。

plugins/vue-awesome-swiper.js

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

Vue.use(VueAwesomeSwiper)

Vueのプラグイン使いますよー名前はVueAwesomeSwiperって言いますよー
みたいな感じのイメージ。

nuxt.config.jsに追記する

css、plugins、buildに追記します。

nuxt.config.js

module.exports = {
  css: [
    'swiper/dist/css/swiper.css'
  ],
  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false }
  ],
  build: {
    vendor: [
      'vue-awesome-swiper'
    ]
  }
}

SSR対応済みのプラグインであれば、pluginsの ssr:false 記述は不要です。
非対応プラグインの場合、ここ書き忘れちゃうとエラー吐きます

補足

複数のプラグインを呼ぶとき、書き方がわからなくて地味に詰まったので書いときます。
jsちゃんと履修してないのでこういうしょうもないところで引っかかりがち(ﾉД`)

nuxt.config.js

/* 複数書くときの例 */
module.exports = {
  css: [
    'swiper/dist/css/swiper.css',
    '~assets/css/style.scss'
  ],
  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false },
    { src: '~plugins/vue-scrollto' }
  ],
  build: {
    vendor: [
      'vue-awesome-swiper',
      'vue-scrollto'
    ]
  }
}

マークアップ

index.vue

<template>
  <div>
    <swiper>
      <swiper-slide>スライド１</swiper-slide>
      <swiper-slide>スライド２</swiper-slide>
      <swiper-slide>スライド３</swiper-slide>
    </swiper>
  </div>
</template>

これで動くぞなもし！

オプション

オプションが大量にあるのでやりたいことはきっとできるはず。
できること一覧がわかりやすくまとめられています👇
vue-awesome-swiper

オプションの書き方例

index.vue

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>スライド１</swiper-slide>
      <swiper-slide>スライド２</swiper-slide>
      <swiper-slide>スライド３</swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true, //無限ループ
        effect: 'fade', //切り替えをフェードに
        pagination: { //ページネーション設定
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: { //前へ・次へのナビ設定
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

よくあるスライダーはこんなかんじですかね！

CSSでちょっと引っかかったところ

<div slot="pagination"> 内の <span class="swiper-pagination-bullet"> へのスタイルの当て方

CSSをscopedで書くのがVue/Nuxtの醍醐味だと思うのですが、ページネーションパーツはslotで配信されるので、スライド数を表す丸ポッチにdata-v-xxxxとかいうのが付いてないやないかーい指定できないYO! と悩みました。
これは、グローバルなCSSに書いてもいいですが、ディープセレクタを使えばおｋです。

scoped スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、>>> コンビネータを使用することができます:
<style scoped>
.a >>> .b { /* ... */ }
</style>
上記は以下にコンパイルされます:
.a[data-v-f3f3eg9] .b { /* ... */ }

by スコープ付き CSS · vue-loader