起こっていたこと

ブラウザ

なにも表示されない。真っ白のまま。

開発者コンソール

警告が表示されていた。

[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.

その訳

[Vue warn]。テンプレートコンパイラが利用できないVueの実行時のみのビルドを使用しています。テンプレートをレンダリング関数にプリコンパイルするか、コンパイラを含むビルドを使用します。

ファイル内容

hello_vue.js

import Vue from 'vue';
import App from './app.vue'

document.body.appendChild(document.createElement('hello'))

new Vue({
  el: 'hello',
  template: '<App/>',
  components: { App }
})

app.vue

<template>
  <div id="app">
    Hello Vue!
  </div>
</template>

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

解決方法

ググる

rails You are using the runtime-only build of Vue where the template compiler is not available.

で、検索した結果、

webpack - Rails + webpacker + vue: "You are using the runtime-only build of Vue where the template compiler is not available." - Stack Overflow
https://stackoverflow.com/questions/50473630/rails-webpacker-vue-you-are-using-the-runtime-only-build-of-vue-where-the

の記事を発見。

具体的な解決方法

以下のファイルに、1行足せば良いらしい。

config/webpack/environment.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)
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }; // <- add alias
module.exports = environment

採用理由

import Vue from 'vue'; がきれいに思えた。

採用に至らなかった方法

config/webpack/shared.jsに aliasを追加
import Vue from 'vue';をimport Vue from 'vue/dist/vue.esm.js';に書き換える。

のような修正案しかヒットしなかった。

その不採用理由

config/webpack/shared.js のファイルがそもそも、なかった。
import時に/dist/vue.esm.jsを追記しないといけないことが、めんどくさく思えた。

解決した感想

やった！

Rails Vue の「Hello Vue!」が表示できない