Nuxt.jsでvue-intro.jsの使い方

Question

Nuxtでvue-introjsというプラグイン を使いたいのですが、introJs is not definedというエラーが出てしまいます。

以下の手順で実装しており、4の段階で上記エラーが発生しました。

やったこと

1 . yarn add vue-introjs
2 . pluginsフォルダにvue-intro.jsを作成し以下を記述

// plugins/vue-intro.js

import Vue from 'vue'
import VueIntro from 'vue-introjs'
Vue.use(VueIntro)

3 . nuxt.config.jsでpluginを読み込み

// nuxt.config.js

  plugins: [
    '~plugins/vue-intro.js'
  ],

4 . example.vueで実装

// example.vue

<template>
  <div>
    <div v-intro="'Step1'" v-intro-step="1"></div>
    <div v-intro="'Step2'" v-intro-step="2"></div>  
  </div>
</template>
<script>
export default {
  mounted() {
    this.$intro().start() // start the guide
    this.$intro().showHints() // show hints
  }
}
</script>

---

何が原因かいまいちわかっていないのですが、どうしたらエラーを解消できますでしょうか？

Answer 1

vue-introjsもintro.jsもNuxt.jsとの互換性について言及されていないため、cdn経由でintro.jsを使用するのが一番無難な気がします。

module.exports = {
  head: {
    link: [
      { rel: 'stylesheet', href: '//cdn.jsdelivr.net/npm/intro.js@2.9.3/introjs.min.css' },
    ],
    script: [
      { src: '//cdn.jsdelivr.net/npm/intro.js@2.9.3/intro.min.js' }
    ]
  },
};

<template>
  <div>
    <div data-intro="'Step1'" data-step="1">A</div>
    <div data-intro="'Step2'" data-step="2">B</div>
  </div>
</template>
<script>
export default {
  mounted() {
    introJs().start();
    introJs().showHints();
  },
};
</script>

Comments

[Khy]

ご回答ありがとうございます。
nuxt.config.js内のheadにcdnを追加してみたのですが、'introJs' is not definedのエラーが出てしまいました。
CDNで読み込んだ時、他に何か設定が必要なのでしょうか?

[Khy]

scriptのsrcをhttps://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.jsにしたら無事動きました。ありがとうございました！

Answer 2

https://github.com/alex-oleshkevich/vue-introjs/issues/21#issuecomment-384521567

こちらのやり方でどうでしょうか

Comments

[Khy]

ご回答ありがとうございます！
nuxt.config.jに以下のように追記してみましたが今度はモジュールが見つからないと出てきました。

`Module not found: Error: Can't resolve 'intro.js' in '/Users/KohkiYokota/Desktop/PROJECT_NAME/node_modules/vue-introjs/dist'`

```
const webpack = require('webpack')

export default {

...

build: {
plugins: [
new webpack.ProvidePlugin({
introJs: ['intro.js', 'introJs']
})
],
extend(config, ctx) {}
}
}
```

[moya_dev]

readme見たらちょっと違いましたね。

https://github.com/alex-oleshkevich/vue-introjs/issues/21#issuecomment-384521567

こちらに合わせるとどうでしょう？？

[Khy]

変更してみましたが、記事にあるようにthis.$intro() is not a functionのエラーが今度は表示されました。

最後のスレッドにseems like you did not correctly registered this plugin in vue.とありますが、プラグイン の登録の仕方が何か間違っているのでしょうか...