What are X Templates?

Apart from regular templates and inline templates, you can also define templates using a script element with the type text/x-template and then referencing the template by an id.

Let's create a x-template for simple use case as below,

<script type="text/x-template" id="script-template">
</script>

Now you can define the template using reference id,

Vue.component('x-template-example', {
template: '#script-template'
})