モジュールの使い方がよく分かりません

大変初歩的な質問で申し訳ございません。

Nuxt.jsで作成したプロジェクトで以下のモジュールを使いたいと思っているのですが、どうやったら使えるようになるのかよく理解できておりません。

http://git.blivesta.com/chaffle/

///// 試したこと//////
リンク先のUsageをみて、以下のようにやってみました。

①npm install chaffleする
②pluginsフォルダ内にchaffle.jsを作成し、以下のコードを記載。
```ここに言語を入力
var elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
var chaffle = new Chaffle(el, { /* options */ });
chaffle.init();
});

③pluginsフォルダにchaffle-mouseover.jsを作成し、以下のコードを記載。
```ここに言語を入力
import Chaffle from 'chaffle'

const elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
  const chaffle = new Chaffle(el, { /* options */ });
  el.addEventListener('mouseover', function () {
    chaffle.init();
  });
});

④index.vueを以下のように作成。

<template>
<div>
  <p data-chaffle="en">English</p>
  <p data-chaffle="ja">日本語</p>
  <p data-chaffle="ja-hiragana">ひらがな</p>
  <p data-chaffle="ja-katakana">カタカナ</p>
  <p data-chaffle="ua">Українська</p>
</div>
</template>
<script>
</script>
<style>
</style>

//// 疑問点 /////
以下のコードをどこに書いたらいいのか分からない。もしくはこれをどこかに書いたらちゃんと動くようになるのかどうかも確信を持てていない。

<script src="YOUR-PROJECT/chaffle.min.js"></script>
<!-- CDN -->
<script src="https://npmcdn.com/chaffle/chaffle.min.js"></script>

何卒よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

いくつか勘違いされているようです。

まず、Chaffle はリンク先を見る限り、Nuxtjs のプラグインではなく、ただの JavaScript プラグインなので、Nuxtjs 用のプラグインを格納する plugins フォルダにコードを記載する必要はありません。

次に、以下のコード

html


こちらは、NodeJS を利用してスクリプトをバンドルする場合には必要ないコードです。そしてNuxt はスクリプトをバンドルするプログラムである、 Webpack を利用すること前提に作成されています(Webpack の設定はおそらく自動でなされているので心配いりません)。

代わりに NodeJS に Chaffle プラグインを取り込むため、コマンドラインで `npm install` する必要がありますが、この際に、`--save` オプションをつけずに実行した場合、データのダウンロードはなされていますが、成果物に組み込む設定がなされていません。プロジェクトルートにある `package.json` を確認し、dependencies に chaffle が含まれているか確認し、含まれていない場合は
`npm install --save chaffle` とやり直してください。

plugins 以下にファイルを作成して書いていたコードは、その処理を実行したい Vue コンポーネントの `<script>`～`</script>` 間に書いてください（今回は index.vue になるかと思います）。

ただし、普通に記述すると、処理対象のHTML要素がまだ作成されておらず、うまくいかないと思うので、
コンポーネントの mounted フックに記述するなどして、要素ができてから Chaffle の適用を行う必要があります。また、VueJS の処理次第では、後から Chaffle の動作と衝突する可能性があります。

どうも質問者様はコード一つ一つの意味が理解できていないようなので、むやみにプラグインに手を出さず、ひとつ一つのライブラリや JavaScript の文法を先に学ばれたほうがよろしいのではないかと思います。(NuxtJS と他のライブラリを組み合わせるのは、ある程度背景の処理の動きを理解できていないと厳しいところがあります)

投稿2019/07/30 11:22