7 Ways To Define A Component Template in VueJS

Anthony Gore
May 4, 2017 · 6 min read

There are plenty of choices when it comes to defining component templates in Vue. By my count, there are at least seven different ways!

In this article, we’ll go through examples of each and address the pros and cons so you know which one is the best to use in any particular situation.

Here’s what we’ll cover:

  1. Plain strings
  2. Template literals
  3. X-templates
  4. Inline templates
  5. Render functions
  6. JSX
  7. Single-file components

Plain strings

The quickest and easiest way to define a Vue component template is to add a template property to the component definition and assign a regular string containing your markup.

This method is really only used in code examples or quick prototypes, though, as it’s very difficult to work with anything beyond the simplest template.

Note: this article was originally posted here on the Vue.js Developers blog on 2017/03/27

app.js

Details

  • In HTML or JS? JS
  • Needs polyfill or transpile? No
  • Needs runtime template compiler? Yes

Runtime template compiler: Vue comes with an internal module that is used to compile HTML templates to JavaScript at runtime. If you use a template option that does not use HTML markup at runtime you can use a special build of Vue.js that does not include this module (and is, therefore, smaller and faster).

Template literals

As of ES2015, a special kind of string called a template literal can be declared using backticks. Unlike regular strings, these allow embedded expressions and can be multi-line.

The multi-line feature makes these much more useful for defining component templates compared to regular strings, as they make markup more readable.

app.js

Details

  • In HTML or JS? JS
  • Needs polyfill or transpile? Yes
  • Needs runtime template compiler? Yes

Older browsers may not support this ES2015 feature, so though you should probably transpile your code to be safe.

X-templates

With this method, your template is defined inside a script tag in the index.html file. The script tag is given the type text/x-template and referenced by id in your component definition.

On the plus side, this method allows you to write your template markup in an HTML file. The downside is that it separates the template from the rest of the component definition so it can be a little hard to reason about.

app.js

index.html

Details

  • In HTML or JS? HTML
  • Needs polyfill or transpile? No
  • Needs runtime template compiler? Yes

Inline templates

With this method, you define the component’s template within the parent template when it gets used. Just be sure to add the attribute inline-template so Vue knows where to find it.

The method has roughly the same upsides and downsides as x-templates. One interesting difference is that, since the template can be defined in the document body, the content could be crawled for SEO.

app.js

index.html

Details

  • In HTML or JS? HTML
  • Needs polyfill or transpile? No
  • Needs runtime template compiler? Yes

Inline templates and x-templates can work in conjuntion with a templating engine from a backend framework, for example, Laravel Blade.

Render functions

Render functions require you to define your template using pure JavaScript. You’ll need to read the Vue docs for the exact syntax, but the rough idea is that you define template nodes by calling createElement(tag, options, childElements).

The advantage of doing this is that it requires no compilation of any sort, and gives you full access to JavaScript functionality rather than what’s offered by directives. For example, to iterate within a markup template you can only use v-for, but in JavaScript, you can use any array method.

However, render functions are far more verbose and abstract than other template options and I don’t expect many people would be comfortable writing a whole application like this.

app.js

Details

  • In HTML or JS? JS
  • Needs polyfill or transpile? No
  • Needs runtime template compiler? No

JSX

JSX is an extension of JavaScript that allows you to use a special template syntax in your JavaScript code.

Popularized by React, this is the most controversial template option in Vue, as some developers see it as ugly, unintuitive and as a betrayal to the Vue ethos.

However, JSX can be used to write a Vue render function in a far more readable and less abstract way. It does require you to transpile, though, as JSX is not readable by browsers.

app.jsx

Details

  • In HTML or JS? JS
  • Needs polyfill or transpile? Yes
  • Needs runtime template compiler? No

Single-file components

One of the most popular features of Vue.js is the Single-File Component (SFC). These allow you to write markup while keeping your component definition in one file. They’re compiled by vue-loader into render functions so you get the best runtime performance, too.

To create a SFC you first create a .vue file, e.g. Checkbox.vue, then define your template in a template tag and define the component in a script tag. This file then gets imported into your main Vue app.

So long as you are comfortable using Vue CLI or setting up your own build tool in your project, SFCs are the way to go.

Checkbox.vue

Details

  • In HTML or JS? HTML
  • Needs polyfill or transpile? Yes
  • Needs runtime template compiler? No

And the winner is…

If you want a TLDR; version of this article here it is: use single-file components as they’re the most versatile and powerful option in almost every scenario.

That said, each of the above will have an edge in a certain scenario and should be judged on the use case you have. Consider each to be another tool in your Vue.js toolbelt that you may one day need!

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store