Q:

Vuejs with Ruby and Webpacker, not displaying view

I'm just trying to get Webpacker, Rails and Vuejs working together.  I've installed everything, I'm not getting any errors in the console or in my logs.  I started the Vue server and my Rails server fine.  I am getting the output in the console from my Vue instance, and I can see traffic on my rails server when I reload the page.  I'm missing something minor, I just can't figure out what.  You all can also enjoy my blank page by clicking on this sentence
Here is my code:
/app/javascript/packs/application.js
import Vue from 'vue'
import App from '../components/app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue({
    el: 'app',
    template: '<App/>',
    components: { App }
  })

  console.log(app)
})

and
/app/javascript/components/app.vue
<template>
  <div id='app'>
      <h1>Anything?</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        message: "Welcome to My Nightmare!" 
      }
    }
  }
</script>

<style scoped>
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

my /app/views/layouts/application.html.erb
<html>
  <head>
    <title>Cinematronix</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Simple routes
Rails.application.routes.draw do
  root 'application#index'
end

My application controller is just this
class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception. 
  # For APIs, you may want to use :null_session instead. 
  protect_from_forgery with: :exception

  def index
  end

end

And then finally the index.html.erb is blank. 

A:

Import Vue from vue/dist/vue.esm
Looks like the article you used has a comment that has this suggestion for people using Rails 5.1

