Fix "[Vue warn]: You are using the runtime-only build of Vue"

This post explains how to fix “[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.”.

This error happens when using the Vue CLI and attempting to use a component that has its template defined as a string.

Fixing “[Vue warn]: You are using the runtime-only build of Vue”

With Vue CLI 3, in order for the Vue.js template compiler to be included in the build output, we need to set runtimeCompiler: true in the Vue.js CLI config.

In order to do this, we need to create the vue.config.js file if it does not exist. We want to set the following key-value pair in the vue.config.js:

module.exports = {
  runtimerCompiler: true
}

A simple Vue.js CLI runtime compiler example

Say you have a fresh Vue CLI project, if you modify src/App.vue as follows:

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import Vue from 'vue';
// inline component with template string :+1:
const HelloWorld = Vue.component('hello-world', {
  props: ['msg'],
  template: `<div>
    <h1>Hello world</h1>
    <div>{{ this.msg }}</div>
  </div>`
});
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>
<!-- style tag -->

When firing up this App.vue using npm run serve from the Vue CLI, we get the following console error:

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

found in

---> <HelloWorld>
        <App>
          <Root>

According to Vue Cli 3 Include Runtime Compiler, we can create vue.config.js (if it doesn’t exist) and add:

module.exports = {
  runtimeCompiler: true
}

Note: adding the Vue.js template compiler to your bundle will be roughly an additional 10KB.

Upon restart of the Vue CLI server using npm run serve the warning will not display and we will see the following:

Why does Vue warn: “You are using the runtime-only build of Vue”?

The Vue CLI assumes that you’ll be using single-file components (rightly so). Single file components are denoted by their .vue extension and the presence of <template>, <script> and <style> tags.

Since single-file components’ template tag is compiled into a render() function at build-time, it’s unnecessary to include the Vue.js template compiler in the runtime build. This is furthered by the fact that the template compiler is extra weight in the bundle and needs to compile the templates at runtime which will slow down initial render of the application.

Further Reading

I’ve created a further write-up of how you can define a Vue.js component without creating a .vue file for it at: Writing multiple Vue components in a single file.

I’m also writing a book, “The Vue.js Workshop” with Packt, for information, subscribe to the Code with Hugo newsletter or email me at [email protected].

Referenced post: Vue Cli 3 Include Runtime Compiler.

Braden Collum