At the moment upgrading vue-loader
causes some changes in how things are done. These are my config options for these items just to get it working.
const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')
const vue = require('./loaders/vue')
environment.loaders.append('vue', vue)
environment.loaders.append('coffee', coffee)
const VueLoaderPlugin = require('vue-loader/lib/plugin');
environment.plugins.append(
'VueLoaderPlugin',
new VueLoaderPlugin()
);
module.exports = environment
const { dev_server: devServer } = require('@rails/webpacker').config
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader',
options: { extractCSS: extractCSS }
},
{
loader: 'rails-erb-loader',
options: {
runner: 'bin/rails runner',
dependenciesRoot: '../app'
}
}]
}
module.exports = {
test: /\.coffee(\.erb)?$/,
use: [{
loader: 'coffee-loader'
}]
}
{
"name": "Example",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.2",
"bulma": "^0.7.5",
"coffee-loader": "^0.9.0",
"coffeescript": "^2.4.1",
"rails-erb-loader": "^5.5.2",
"turbolinks": "^5.2.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-resource": "^1.5.1",
"vue-template-compiler": "^2.6.10",
"vue-turbolinks": "^2.0.4"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.4.1"
}
}