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

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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';

Answer 4

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'
      }
    }