#2 – Vue.js X-Templates | Vue 2 Components, Beginners tutorial
Articles,  Blog

#2 – Vue.js X-Templates | Vue 2 Components, Beginners tutorial


Hello guys, welcome to back to the channel. In the last video, we have created this counter
component. And in the last video, I have also mentioned
there are a couple of ways to add templates in Vue component. And here we have registered the template using
string. Now in this video, I will show you the x-template
way. So, let’s see this. To define an x-template, here we add a script
tag, and type is equal to text/x-template. Next, we give an ID to reference it. So, let’s say ID is equal to counter-template. Now we can cut this template content from
here and we can past it right here. And our final step is to reference this x-template
right here, using the CSS selector, in our case, that is the ID counter-template. Let’s see this in the browser, refresh. It did not work. Actually we have to define this x-template
before Vue instance. So, let’s move this right here, above app.js. Now refresh, And it is working. The main benefit of this feature is that,It
autocomplete tags in the editor. But it is considered that these can be useful
in extremely small applications, but should otherwise be avoided because it is a separate
template from the rest of the component and it does not give the whole picture of the
component. We will see the other alternative ways to
defining templates in future videos. And one more thing you should notice in that
in all ways vue component templates must be a single root element. For example, let’s say if I add a paragraph
right here and if we see this in the browser. And it breaks. And console tab you can see, component template
should contain exactly one root element. Now to fix this, we will wrap this div tag,
refresh. And it is working now. This is all in this tutorial. If you like the video hit the like button
share this video and don’t forget to subscribe us. See you in the next video.

Leave a Reply

Your email address will not be published. Required fields are marked *