【Vue】js で template を使いたくてハマった

まずバージョン情報。

• vue : 2.6.10
• vue-cli : 3.7.0
• node : 10.11.0
• npm : 6.4.1

Vue cli を使って「vue create app-name」とかやってプロジェクトを作成すると、デフォルトでは Vue の単一ファイルコンポーネントを使うプロジェクトが作成されます。

普段は単一ファイルコンポーネントのみで作っているので知らなかったのですが、 js で component を動的に作らなくてはいけない場面に遭遇しました。

js で component を作る簡単な例です。

<template>
  <div>
    <comp></comp>
  </div>
</template>

<script>
let comp = {
  template: "<div>hoge</div>"
}
export default {
  components: {
    comp:comp
  }
};
</script>

これで実行するとブラウザに hoge と表示されるはずなのですが、いろいろ試しても画面は真っ白のままです。chrome だとエラーログも出ません。3 時間くらいハマりました（泣）。

firefox でアクセスしてみたらコンソールに以下のワーニングが出ていて解決の糸口がつかめました。
「You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.」

ただし、いくらググってもバージョンの差異が原因で解決できません。 webpack の設定ファイルに alias を追加すれば良いらしいのですが いまのバージョンでは webpack.confi.js 自体存在しないのでどうしたものか悩みました。

結論としては main.js で import している Vue のビルドを変更します。

修正前：

import Vue from "vue";

修正後：

import Vue from "vue/dist/vue/vue.esm.js";

修正前ではランタイム限定版のビルドがインポートされるようです。

公式にもちゃんと書いてありますね。
インストール — Vue.js

本日は以上です。
　

基礎から学ぶ Vue.js

Vue.js入門 基礎から実践アプリケーション開発まで