Vueの完全ビルドを読み込んで、vue.runtime.esm.js:619 [Vue warn]: 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.を解決する 💪

特殊な状況だと思うのですが、若干ハマったのでメモ。

結論

ものすごく、ひさしぶりにNuxt.jsなしてVueを使ったのですが、

vue.runtime.esm.js:619 [Vue warn]: 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.config.jsに、

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
},

を追記したら解決しました。

経緯

ちょっと構成が特殊で、基本的にはWordPressで構成されたサイトの一部分にVueを使おうと思いました。
そして、webpackをつかってTypeScriptをJavaScriptにコンパイルしていたので、Vueはscriptタグで読み込むのではなく、npmをimportして使いたいな。と。

そんなこんなで、

PHP

<div id="app"></app>

TypeScript

import Vue from 'vue';

new Vue({
  el: '#app',
  mounted() {
    console.log('Ya-Ha-!');
  }
});

的なコードが爆誕してしまったわけです。

問題点

Vueのドキュメントに書いてありました。

普通にimportすると、インポートされるのは「ランタイム限定ビルド」とのことで、「完全ビルド」を使えば解決しそうです。

完全ビルドのインポート方法

webpackを使っているプロジェクトにもかかわらず、cdnからscriptタグ経由で読み込むのは嫌ですし、どうしたものかと思ったのですが、webpackの設定でエイリアスを設定してあげれば解決するということがわかりました。ドキュメントにはなんでも載ってますね。

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' webpack 1 用
    }
  }
}

https://jp.vuejs.org/v2/guide/installation.html より引用

ドキュメントには、webpackの他に、Rollup、Browserify、Parcelの設定方法も記載されています。