Using Inline Templates within Vue Instances

Published on April 27, 2017 by

Now that we have seen how to dynamically mount Vue instances to HTML elements, let’s see how we can use inline templates. Until now, we have always added all of our HTML markup within the HTML section on JSFiddle. But you can, however, also add a Vue instance’s template within the instance itself by using the template property.

In case you didn’t read the previous post, we will be modifying the following code to use an inline template.

<div id="app">
  <h1>{{ message }}</h1>
</div>
var vm = new Vue({
	data: {
		message: 'Hello World!'
	}
});

vm.$mount('#app');

Alright, so the first step is to get rid of the h1 element within the template, because we will be moving that to an inline template within the Vue instance itself. So the template simply becomes the following.

<div id="app"></div>

Then we need to add a template property to the Vue instance containing the template.

var vm = new Vue({
	template: '<h1>{{ message }}</h1>',
	data: {
		message: 'Hello World!'
	}
});

vm.$mount('#app');

Running the code now should give us the same result as before. So, instead of taking the inner HTML of the element matching a CSS selector defined in the el property, the Vue instance now uses the template that we just defined directly within the instance itself.

Of course this won’t look pretty with big templates, so you should really keep your templates short if you opt for this approach. In fact, if you are using single or double quotes, the string can only contain one line. However, if you use the ES6 syntax – which uses backticks – your string can span multiple lines, so let’s modify our template property to use this syntax.

var vm = new Vue({
	template: `
		<div>
			<h1>{{ message }}</h1>
		</div>`,
	data: {
		message: 'Hello World!'
	}
});

Even with this, however, you should still keep the template short, or it will take too much focus away from the JavaScript code, in which case it would be better to separate the two. But, if the template is small, then it is nice to keep everything together in a very self-contained way. This is actually something we are going to see later in the series when we dive into using components. Another thing to note, is that when you include HTML markup within your JavaScript code, you may not get correct syntax highlighting and IntelliSense support, depending on your IDE.

Alright, so we’ve seen how we can specify a CSS selector when using the $mount method, similar to how we did with the el property. We also saw how we can pass in a DOM element instead. In fact there’s a third option; not passing any argument at all.

//vm.$mount('#app');
vm.$mount();

Running the code, we don’t see anything being output, so what good is this? Well, perhaps you remember the $el property on the Vue instance, which contains the Vue instance’s DOM element. Let’s back up a bit and log this property to the console instead of mounting the template.

//vm.$mount();
console.log(vm.$el);

Now we see undefined being output in the console. This is because the template has not been rendered yet, so this makes sense. Let’s now try to mount the template by uncommenting the line again.

vm.$mount();

Now we see a div element being output to the console. This is the native DOM element, which has just been formatted primitively by my browser. So we can see that the template has now been rendered by the Vue instance, and the string interpolation has been replaced with the appropriate value. But we haven’t told Vue where to add it to the DOM, so it has actually been rendered as an “off-document element.” To actually add it to the DOM, we can use the native DOM API as follows.

document.getElementById('app').appendChild(vm.$el);

This should give us the same result as we have seen a couple of times before. This just finds the element with the ID of app and appends the template’s DOM element as a child.

So if you do pass in a CSS selector or a DOM element to the $mount method, the template will be added within that element. And if you don’t pass anything, then the template will be rendered by the Vue instance, but you are responsible for inserting it into the document yourself. This is not such a common approach, which is good, because we really want to work as little as possible with the DOM directly. Nevertheless, now you know how to do it.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

One comment on »Using Inline Templates within Vue Instances«

  1. Raja Munisamy

    You are a legend! Thanks!

Leave a Reply

Your e-mail address will not be published.