Rails + webpacker + vue: "You are using the runtime-only build of Vue where the template compiler is not available."

Question

I've created a new rails 5.2 application and installed vue with:

bundle exec rails webpacker:install:vue

After creating a simple endpoint Home#landing and adding <%= javascript_pack_tag 'hello_vue' %> to the default layout the sample app is working as expected.

I made a few changes:

1) Modified hello_vue.js to,

import Vue from 'vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#vueapp',
    data: {
      message: "Hello Vue!"
    }
  })
})

2) Created and empty <div id="vueapp"> {{ message }} </div> at the only view I have.

3) Removed app.vue from app/javascripts.

As far as I know, that should work too (and is how we were working with the vue-rails gem that runs with sprockets). Now is failing with:

[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.

I cannot exactly understand what is happening or why is failing because there aren't any components or template to compile at my app.

Answer 1

The default export for the vue NPM package is the runtime only.

As you need the template compiler, you need to change your Vue import to the following, which includes both the runtime and the template compiler:

import Vue from 'vue/dist/vue.esm.js';

More details: here https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

Answer 2

You can also define an alias to the vue esm build in config/webpack/environment.js file:

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

environment.loaders.append('vue', vue);
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }; // <- add alias
module.exports = environment

And then you will be able to import vue like this:

import Vue from 'vue'