Upgrade

ABOUT JOIN OUR WEEKLY NEWSLETTER

7 Ways To De ne A Component
Template in VueJS
Anthony Gore Follow
May 4, 2017 · 3 min read

There’s plenty of choice when it comes to defining component templates in Vue. By my count there
are at least seven different ways:
String
Template literal
X-Templates
Inline
Render functions
JSX
Single page components
And maybe more!
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.
Note: this article was originally posted here on the Vue.js Developers blog on 2017/03/27
1. Strings
By default a template will be defined as a string in your JS file. I think we can all agree that
templates in a string are quite incomprehensible. This method doesn’t have much going for it other
than the wide browser support.
1 Vue.component('my-checkbox', {
2 template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true,
3 data() {
4 return {
5 checked: false,
6 title: 'Check me'
7 }
8 },
9 methods: {
10 check() {
11 this.checked = !this.checked;
12 }
13 }
14 });

component.js hosted with ❤ by GitHub view raw

2. Template literals
ES6 template literals (“backticks”) allow you to define your template across multiple lines,
something you can’t do in a regular Javascript string. These are much easier to read and are
supported now in many new browsers, though you should probably still transpile down to ES5 to be
safe. Upgrade
This method isn’t perfect, though; I find that most IDEs still give you grief with syntax highlighting,
and formatting the tabs, newlines etc can still be a pain.
1 ABOUT JOIN OUR WEEKLY NEWSLETTER
Vue.component('my-checkbox', {
2 template: `<div class="checkbox-wrapper" @click="check">
3 <div :class="{ checkbox: true, checked: checked }"></div>
4 <div class="title">{{ title }}</div>
5 </div>`,
6 data() {
7 return {
8 checked: false,
9 title: 'Check me'
10 }
11 },
12 methods: {
13 check() {
14 this.checked = !this.checked;
15 }
16 }
17 });

component.js hosted with ❤ by GitHub view raw

3. X-Templates
With this method your template is defined inside a script tag in the index.html file. Th script tag is
marked with text/x-template and referenced by an id in your component definition.
I like that this method allows you to write your HTML in proper HTML markup, but the downside is
that it separate the template from the rest of the component definition.
1 Vue.component('my-checkbox', {
2 template: '#checkbox-template',
3 data() {
4 return {
5 checked: false,
6 title: 'Check me'
7 }
8 },
9 methods: {
10 check() {
11 this.checked = !this.checked;
12 }
13 }
14 });

component.js hosted with ❤ by GitHub view raw

1 <script type="text/x-template" id="checkbox-template">
2 <div class="checkbox-wrapper" @click="check">
3 <div :class="{ checkbox: true, checked: checked }"></div>
4 <div class="title"></div>
5 </div>
6 </script>

index.html hosted with ❤ by GitHub view raw

4. Inline Templates
By adding the inline-template attribute to a component, you indicate to Vue that the inner content
is its template, rather than treating it as distributed content (see slots).
It suffers the same downside as x-templates, but one advantage is that content is in the correct place
within the HTML template and so can be rendered on page load rather than waiting until Javascript
is run.
1 Vue.component('my-checkbox', {
2 data() {
3 return {
4 checked: false,
5 title: 'Check me'
6 }
7 },
 8 methods: {
9 check() {
Upgrade
10 this.checked = !this.checked;
11 }
12 } ABOUT JOIN OUR WEEKLY NEWSLETTER
13 });

component.js hosted with ❤ by GitHub view raw

1 <my-checkbox inline-template>
2 <div class="checkbox-wrapper" @click="check">
3 <div :class="{ checkbox: true, checked: checked }"></div>
4 <div class="title"></div>
5 </div>
6 </my-checkbox>

index.html hosted with ❤ by GitHub view raw

5. Render functions
Render functions require you to define your template as a Javascript object. They are clearly the
most verbose and abstract of the template options.
However, the advantages are that your template is closer to the compiler and gives you access to full
Javascript functionality rather than the subset offered by directives.
1 Vue.component('my-checkbox', {
2 data() {
3 return {
4 checked: false,
5 title: 'Check me'
6 }
7 },
8 methods: {
9 check() {
10 this.checked = !this.checked;
11 }
12 },
13 render(createElement) {
14 return createElement(
15 'div', {
16 attrs: {
17 'class': 'checkbox-wrapper'
18 },
19 on: {
20 click: this.check
21 }
22 }, [
23 createElement(
24 'div', {
25 'class': {
26 checkbox: true,
27 checked: this.checked
28 }
29 }
30 ),
31 createElement(
32 'div', {
33 attrs: {
34 'class': 'title'
35 }
36 }, [this.title]
37 )
38 ]
39 );
40 }
41 });

component.js hosted with ❤ by GitHub view raw

6. JSX
The most controversial template option in Vue is JSX. Some developers see JSX as ugly, unintuitive
and as a betrayal to the Vue ethos. Upgrade
JSX requires you to transpile first, as it is not readable by browsers. But, if you need to use render
functions, JSX is surely a less abstract way of defining a template.
1 ABOUT JOIN OUR WEEKLY NEWSLETTER
Vue.component('my-checkbox', {
2 data() {
3 return {
4 checked: false,
5 title: 'Check me'
6 }
7 },
8 methods: {
9 check() {
10 this.checked = !this.checked;
11 }
12 },
13 render() {
14 return <div class="checkbox-wrapper" onClick={ this.check }>
15 <div class={{ checkbox: true, checked: this.checked }}></div>
16 <div class="title">{ this.title }</div>
17 </div>
18 }
19 });

component.js hosted with ❤ by GitHub view raw

7. Single File Components
So long as you are comfortable with using a build tool in your setup, Single File Components are the
king of template options. They bring the best of both worlds: allowing you to write markup while
keeping all your component defintion in one file.
They require transpiling and some IDEs don’t support syntax highlighting for this file type, but are
otherwise hard to beat.
1 <template>
2 <div class="checkbox-wrapper" @click="check">
3 <div :class="{ checkbox: true, checked: checked }"></div>
4 <div class="title"></div>
5 </div>
6 </template>
7 <script>
8 export default {
9 data() {
10 return {
11 checked: false,
12 title: 'Check me'
13 }
14 },
15 methods: {
16 check() {
17 this.checked = !this.checked;
18 }
19 }
20 }
21 </script>

component.vue hosted with ❤ by GitHub view raw

You might argue there are even more template definition possibilities since you can use template
pre-processors like Pug with SFCs!
Which is the best?
Of course there’s no one perfect way, and each should be judged on the use case you have. I think
the best developers will be aware of all the possibilities and have each as a tool in their Vue.js
toolbelt!

. . .
 Take A Free Vue.js Introduction Course! Learn what Vue is, what kind of apps you can build with it,
how it compares to React & Angular, and more in this 30-minute video introduction. Enroll for free! Upgrade

JavaScript Vuejs ABOUTReact JOIN OUR WEEKLY NEWSLETTER

Vue Web Development

2.9K claps

WRITTEN BY

Anthony Gore Follow

Here to teach you Vue.js! Vue Community Partner, creator of

@Vue.js Developers. Take my free Vue intro course:
https://bit.ly/2Eb4uPT

Vue.js Developers Follow

Helping web professionals up their skill and knowledge of

Vue.js

See responses (15)

More From Medium

More from Vue.js Developers More from Vue.js Developers More from Vue.js Developers

Top highlight

How I made it easy to develop How to build a Reusable Vuejs Creating a todo -app using
on Vue.js with server-side modal component VueJS and Framework7
rendering Jakz Aizzat in Vue.js… Natalia Sulkama in Vue.js…
Jul 7 · 3 min read 69 Jul 1 · 8 min read 81
Georgy Perepecho in…
235
Jun 28 · 5 min read