What exactly is Vue's runtime-only build and how does it differ from compiler build?

user_15278052 0
Viewed 2891

I am getting this warning:

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

with my basic boilerplate code below. I understand it's blocking me from creating my Foo component like that but exactly does that mean and how does it different from another way of instantiating the Vue instance?

const Foo = {
  template: `<div>xxx</div>`
}
const routes = [
  { path: '/foo', component: Foo },
  { path: '/', component: App}
]
    
const router = new VueRouter({
  routes:routes
})
Vue.config.productionTip = false
    
new Vue({
  router
}).$mount('#app')
vuejs2 vue.js
1 Answers

Full build (i.e. "compiler-included")

Also known as the "full" build, "compiler-included" includes both compiler and runtime. The compiler is what allows using template strings like:

template: `<div>xxx</div>`

CDN: When using Vue through a CDN, e.g. <script src="https://unpkg.com/vue"></script>, it's typically the Full build (unless you specify otherwise).

Runtime-only

The alternative to template strings is the render function. If you used only these, you wouldn't need the compiler, and could use a runtime-only build:

render(h) {
  return h('div', 'xxx')
}

Bundlers (e.g. Vue CLI): When you use a bundler like Vue CLI, it pre-builds your templates into render functions for you so that the compiler isn't needed in production. This allows for a runtime-only build.

The docs describe the runtime like this:

Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.

So, the difference between the Full build and the Runtime-only build is the inclusion or exclusion of this template compiler.

The docs explain it this way:

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:

And there is this caveat to be aware of:

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts you should use it whenever you can

Also in the docs are configurations for using the full build with bundlers. In Webpack, for example, it's:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}
user_21850930
Related