You are using the runtime-only build of Vue where the template compiler is not available

38
votes

I'm trying to compile my Vue.js app with webpack but I get this warning in the browser.

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.

What does this mean? How do I resolve the error?

6
webpackvue.js

6 Answers

34
votes

This is because the version of vue without the template compiler (needed) is included by default. To override this default, add this to your webpack.config.js:

// webpack.config.js
{
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
    },
}

Source: https://github.com/vuejs-templates/webpack/issues/215

34
votes

This error pops up if you try to use non-precompiled Vue templates.

To fix this, set the runtimeCompiler option in vue.config.js to true: 

module.exports = {
  runtimeCompiler: true
}

Note that this will include additional JavaScript payload into your distribution.

Alternatively, you can use precompiled Vue templates.

9
votes

I still had an error after setting the runtimeCompiler to true in vue.config.js file.

You can simply edit your src/main.js file

from : import Vue from 'vue'

to : import Vue from 'vue/dist/vue.js';

7
votes

If you compile your app with vue-cli-service add the following code to vue.config.js depending upon compiler:

  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  }

If you compile your app with webpack add the following code to webpack.config.js:


    resolve: {
      alias: {
         vue: 'vue/dist/vue.js'
      }
    }
6
votes

Use render function

new Vue({
    el: 'body',
     render: function(createElement) {
        return createElement(hello)
    } });
0
votes

For me, it was a typo (lowercase). I had:

import Vue from "Vue";

instead of

import Vue from "vue";