環境: Rails 5.2/6.0、Webpacker 4.2、Vue.js 2.6
コンパイラ入りのVue.jsを使う
.vueファイルの中のテンプレートではなく、Railsが出力したHTMLやtemplate:で指定したHTMLをテンプレートとして使う場合は、コンパイラ（HTMLパーサ）入りのビルドを使う必要があります。
コンパイラ入りビルドを使わないと、ブラウザーでの実行時にHTMLをパースできなくなり、次のエラーが出ます。
[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の設定で、environment.config.resolve.aliasを次のように指定すると、import Vue from 'vue' でコンパイラ入りのvue/dist/vue.esm.jsが使えます。
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
// Vue.js フル版（Compiler入り）
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }
module.exports = environment
この指定がないときは、import Vue from 'vue' はコンパイラなしのvue/dist/vue.runtime.esm.jsになります。.vueファイルの中のテンプレートだけ使う場合はそれでかまいません。
IE11対策
詳しくは、Rails+WebpackerでのIE11対策をご覧ください。
application.jsに次の2行を入れると、IE11が対応していない新しめのJavaScriptの機能が使えるようになります。この2つはWebpackerを入れれば入るので、yarn addしなくても使えます。
import "core-js";
import "regenerator-runtime/runtime";
Vue.jsはデフォルトでIE 11に対応しているので、Vue.jsの基本的な機能だけ使うならこの2つは要りません。IEが対応していないJavaScriptのメソッドや組み込みクラスを使うときは core-js、asyncとawaitを使うときは regenerator-runtime が必要です。
Turbolinks対策
Turbolinksを使っている場合はvue-turbolinksを入れないと、ブラウザーの戻るボタンなどで動作がおかしくなります。
$ yarn add vue-turbolinks
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter);
jQueryとBootstrapを使う
Rails 6にjQueryとBootstrapを入れるで書きました。Webpackerで入れる方法と、assetsを使う方法があります。
AxiosでCSRF対策用のトークンを設定
Rails+AxiosでCSRF対策用のトークンを使う設定 で書きました。AxiosのInterceptorsの機能を呼び出すコードを書いて、実行しておきます。