Vue.jsでグローバル変数を使う方法【現役エンジニアが解説】

今回は、Vue.jsでグローバル変数を使う方法について、簡単に解説していきます。

CDN版

Vue.jsでグローバル変数を使う方法はいくつかあります。
CDN版では難しいことはなく、通常のJavaScriptと同じです。

var hoge = 'hoge';
var isHoge = false;

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      hoge: hoge,
      isHoge: isHoge
    }
  }
});

上記のように、Vueインスタンスの外に定義したものは、そのまま同じ名前でVueインスタンス内でも使えます。

モジュールをimport

以下のようなグローバル変数用のVueファイルを作ります。