孤独プログラマー譚

孤独死が近い。

Vue.js 単一ファイルコンポーネントと通常使用の併用

通常使用とは何なのかというと、HTMLのscriptタグ内で、new Vue() してやること…ということにします。

単一ファイルコンポーネントは使いたい。
でも、他のHTML要素の方も、Vue.jsで制御したい。
その場合、どうすればいいか、調べてもよく分からなった。

例えば、ボタンを押した時にアラートメッセージを出す…等の小さい制御も、Vue.jsで書きたい。
でもそれは、単一ファイルコンポーネントにする程ではない。
かと言って、大きめの動的な要素は、単一ファイルコンポーネントを使いたい。

そこで、以下の方法でやることにした。

main.js
Webpack等でバンドルする際のエントリーポイント。
Vue.extend()は、再利用可能なコンストラクタを生成するらしい。
components や data をVueコンストラクタに登録しつつも、新たなコンストラクタを作る。
それを、global.Vue …要はグローバル変数に入れてやる。
これで、各HTMLファイルから、new Vue() してやることが出来る。

global.Vue = Vue.extend({
  components: {
    menulist: Menu,
    detail: Detail,
  },
  data () {
    return {
      foo: 'foo'
    }
  },
  router,
})

以下、HTMLファイル。
Vueコンストラクタからインスタンスを生成している。

<div id="app">
  <div>{{ foo }}</div>
  <div>{{ bar }}</div>
</div>
<script src="bundle.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    bar: 'bar',
  },
})
</script>

Webアプリ共通の設定 → エントリーポイントで登録
各HTMLページ毎の設定 → scriptタグ内で登録

という感じで作ってやる。今のところこれが一番スッキリしてると思う。