質問: function() { console.log('call func'); } ``` 手動でspaトップのhtmlファイルに書き起こせば良いのかもしれませんが、 可能であればNuxtで一元管理したいと考えています。 また、上記の質問ですが、プラグイン側のjsは編集できない前提でお願いします。 何卒よろしくお願い致します。
回答: chunweさんのコードでは、`func`関数をグローバルに宣言できていません。 `plugins/test.js`のローカル関数になっています。 JSのモジュール(ファイル)は、それぞれスコープとなるので、`export`しない限り、そのファイルでのみ有効です。このあたりは別途調べてみてください。 chunweさんのコードでは、`mounted()`で`func()`を実行しています。このライフサイクルフックはクライアントでのみ実行されるので、ここでいう「グローバル」は`window`の事とします。 その場合、`window.func`を定義する必要があります。 ``` // plugins/test.js window.func = function() { ... } ``` また、プラグインはクライアントサイドとサーバーサイドの両方で実行されますが、今回の場合サーバーサイドでは実行すべきでない(`window`がない)ので、`nuxt.config.js`でプラグインの`ssr`を`false`にします。 ``` export default { plugins: [ { src: '~/plugins/test', ssr: false } ] } ``` ### 追記(2018/12/23) des.jsについて確認しました。 このプラグインがエラーになるのは「var宣言しないことでグローバルにする」など、現代では許容されない書きかたがされているのが問題です(かなりおおざっぱに言っているので、正確ではありません)。 サイト自体が2006年の更新でとまっているようですので、仕方ないかもしれません。 同じようなことをする別のプラグインを探すか、des.js自体を修正する必要があります。 ``` // des.js des = new function() { ... } // この時点で、前もって`des`が宣言されていないので、エラーになります。 ``` 「グローバル関数を展開するやりかた」自体は、上に自分が書いた方法でできます。 今回は、使おうとしているプラグイン側に問題があるようです。 ### 追記(2018/12/23) もう一つやり方があったので、追記します。 `nuxt.config.js`で`head`オプションを利用する方法です。 この方法であれば、`script`タグとして`head`要素に展開されるので、モジュールシステムの外側でスクリプトを実装・実行できます。 クライアントサイドのVue関連の記述は`body`の最後に読み込まれるので、その実行時点では`head`で読み込んだJSを問題なく使用できると思います。 ``` module.exports = { head: { script: [ { src: 'http://user1.matsumoto.ne.jp/~goma/js/des.js' } ] } } ```