You are using the runtime-only build of Vue where the template compiler is not available.
Wed Apr 4, 2018
Sat Aug 10, 2024railsでvue.jsを使ってみようと思いまして、【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～を参考に進めて いたのですが、うまくいかない。
画面になにも表示されないのです。
コンソールでエラーを確認してみると以下のエラーが確認できました。
[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.
(found in <Root>)
いろいろググってみるとどうやらwebpackのバージョンが違うとのことなので、自分のバージョンを確認します。
$ npm list --depth=0
rails-vue-sandbox@ /home/vagrant/rails/rails-vue-sandbox
├── @rails/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
この場合は、import Vue from 'vue'をimport Vue from 'vue/dist/vue.esm';に変更します。これだけで解決できました。
config/webpack/shared.jsにaliasを追加すれば解決する。
とかいう記事をよく見かけましたが、これはWebpacker 2系でデフォルトで生成される設定ファイルのことなので少し古い情報になるみたいです。だいたい、config/webpack/shared.jsなかったし。
ということで、上記記事の参考コードを以下のようにすると解決しました。
import Vue from 'vue/dist/vue.esm';
import App from '../app.vue'
// register the grid component
Vue.component('demo-grid', {
template: '#grid-template',
replace: true,
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Chuck Norris', power: Infinity },
{ name: 'Bruce Lee', power: 9000 },
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
}
})
See Also
