起こっていたこと
ブラウザ
なにも表示されない。真っ白のまま。
開発者コンソール
警告が表示されていた。
[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
を追記しないといけないことが、めんどくさく思えた。
解決した感想
やった!