Rails 6 Webpack/Vue configurations

application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") // Optional, pulling this in for Bootstrap 4

// import Vue from 'vue/dist/vue.esm' which we updated webpack to load from
import Vue from 'vue'
import TurbolinksAdapter from 'vue-turbolinks'

// https://bootstrap-vue.org/
// Optional, add this if you want to leverage BootstrapVue components
import { BootstrapVue } from 'bootstrap-vue'

Vue.use(TurbolinksAdapter);
Vue.use(BootstrapVue);

// Make Vue and bootstrapVue available globally, if this is not desired, remove it
// but make sure to then import this pack or vue directly in any dependent script/pack
window.Vue = Vue;
window.BootstrapVue = BootstrapVue;

default_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)
module.exports = environment

environment.js

const vueConfig = require('./vue_config')

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)

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery', // Optional if using jquery with bootstrap
    jQuery: 'jquery/src/jquery', // Optional if using jquery with bootstrap
    Popper: ['popper.js', 'default'] // Optional if using jquery with bootstrap
  })
)

environment.config.merge(vueConfig);
module.exports = environment

package.json

{
  "name": "appName",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^4.2.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.10.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "puppeteer": "^2.1.1",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10",
    "vue-turbolinks": "^2.1.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.9.0"
  }
}

vue_config.js

module.exports = {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm'
    }
  }
}