More than 3 years have passed since last update.

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

Posted at 2020-05-14

概要

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

yarnを使ってインストール

$ yarn add vue-js-modal

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

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

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

nuxt.config.js

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

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