【Nuxt.js】vue-js-modalの導入方法

概要

Nuxtにvue-js-modalを導入するのに少しハマった部分があったので、導入方法を残しておきます。

導入

インストール

yarnを使ってインストール

$ yarn add vue-js-modal

vue-js-modal.jsを作成

pluginsディレクトリ内にvue-js-modal.jsファイルを作成します。

plugins/vue-js-modal.js

import Vue from "vue"
import VModal from "vue-js-modal"

Vue.use(VModal)

nuxt.config.js

以下ハマり部分。

nuxt.config.jsを変更していきます。

nuxt.config.js

export default {
  plugins: [
    "~/plugins/vue-js-modal",
  ]
}

とやれば導入出来るはずだったのですが、私の環境では動かず、以下のようにすることで動きました。

nuxt.config.js

export default {
  plugins: [
    { src: "~/plugins/vue-js-modal", ssr: false },
  ]
}

明示的にssrをfalseにすることでコンポーネント内でmodalを使用することが出来ました。