Dealing With Templates in Vue.js 2.0

This article is mostly about where and how to define templates in Vue 2, which of the described ways to use templates is best, depending on the case, and not about Vue's template syntax.

Vue 2.0 introduced it's own virtual DOM implementation. The virtual DOM makes room for a pretty big piece of optimization: you can now precompile your templates to pure JavaScript, so Vue can skip this step in the browser.

Here are the presented ways and their drawbacks:

  • Writing templates that compile at runtime (lesser performance)
  • Using single file .vue components (requires a build step)
  • Manually writing render functions (pure JavaScript, no html-like template syntax)

According to the author, in general, if you are building a bigger application where performance is essential Vue single-file components seem to be the best choice. If you don't mind low performance and are willing to use the runtime build (enhancement pages on existing projects),the recommended way is using JavaScript template literals in the component's template option.

Read the post here. By @sebdedeyne