Vue.js app works in development but not mounting template in production with Rails 5.2.0 / Webpacker - blank screen with no errors in console

Question

I\'m using Rails 5.2.0 and Webpacker gem to deploy a Vue application.

The show.html.erb file is very simple:

Answer 1

I eventually managed to solve it by changing how the Vue app loading was defined.

Try import Vue from 'vue' (instead of from 'vue/dist/vue.esm') and then:

const app = new Vue({
    el: domElement,
    render: h => h(RootComponent)
  })

The comments that appear in the hello_vue.js scaffold from the Webpacker gem tell you that you can choose between using the DOM as your template OR load the component with a render function; they both do work in development, but only the latter (loading the component with a render function, using vue instead of vue/dist/vue.esm and render: h => h(RootComponent) worked for me in production.

This has been, by far, the longest, most frustrating debugging session of my life, since there are absolutely no errors in console, you just stare into a blank screen, and Vue is running since it removes the DOM element it was mounted to from the DOM.

Source of solution: https://stackoverflow.com/a/48651338/1290457 and here's the github issue (currently open) on Webpacker gem https://github.com/rails/webpacker/issues/1520

I still don't know how to use DOM as template with Vue in production tough.