Rails+VuejsでWebアプリを作成するときの注意点

[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をWebpackを利用して組みこもうとすると上のようなエラーがでます。

そんな場合はこうします。

config

├── webpack
│   ├── custom.js
│   ├── development.js
│   ├── environment.js
│   ├── loaders
│   │   └── vue.js
│   ├── production.js
│   └── test.js

custom.jsを新規で作成し

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

として保存します。

environment.js内に以下の黄色で示した行を追加します。

const { environment } = require('@rails/webpacker')
const vue = require('./loaders/vue')
const customConfig = require('./custom')

environment.loaders.append('vue', vue)
environment.config.merge(customConfig)
module.exports = environment