How to use Templates in Vue

📣 Sponsor

In Vue, templating is the main way we create reusable components. We can use templates to take data, and turn it into real elements on a screen that users can see. In this article, we'll be covering how templates work in Vue, and some things about them that you may not have known.

Creating a template in Vue

Every Vue .vue file has to have a <template> tag. The <template> tag itself is simply a container for all the HTML that is going to go into building our component. When a .vue file is rendered, all <template> tags are removed. A very basic template in Vue looks something like this:



    <h2></h2>
    <p>Welcome to my website!</p>

<script>
    export default {
        data() {
            return {
                title: "Hello!"
            }
        }
    }
</script>

In the above example, we have <template> section which contains all of our HTML for this component. Within that, we use curly braces to identify content that will come from our Javascript instance. So when we say , Vue will look for title within our Vue data() or props, and use that instead. As such, in this example, will render as "Hello!".

Use at least one tag

<template> tags need to have at least one HTML tag within them, otherwise Vue will throw an error. We can also use <template> tags within <template> tags, if we want to.

How to use HTML in Vue Templating

Sometimes we want to use HTML generated from our Javascript, within our template. If we use the same approach for HTML, the HTML will be rendered entirely as a string. As such, we have to use the v-bind attribute. The below example will take the HTML from title, and render it within our <h2> tag:



    <h2 v-html="title"></h2>
    <p>Welcome to my website!</p>

<script>
    export default {
        data() {
            return {
                title: "<span>Hello!</span>"
            }
        }
    }
</script>

Be careful with HTML

Since v-bind can be used maliciously, make sure the HTML you use is generated by you, and not by a user.

How to use Props in Templates in Vue

Props work exactly the same as data() in Vue. If you have information coming from a prop, you can still use it in your <template>. As such, you can refer to props directly in your template.

For example, if we were expecting title to come from a prop called title, our code would look like this:



    <h2> </h2>
    <p>Welcome to my website!</p>

<script>
    export default {
        props: [ 'title' ]
    }
</script>

If you are interested in learning more about props, read our guide here.

Using Javascript Expressions in Vue Templates

We can also use Javascript Expressions directly in Vue, using the curly bracket notation. Note: we can only use one expression in curly brackets, so stick to either ternary operations, or functions. Things like if() statements will not work.

Here is an example of a ternary operator which returns "Hi" if title is set to 54, and "Bye", if it is not.





<script>
    export default {
        data() {
            return {
                title: 53
            }
        }
    }
</script>

We can also run functions found in our Javascript this way. Functions like this can be called if they are within the methods section of our Javascript:





<script>
    export default {
        data() {
            return {
                date: "11 Feb"
            }
        },
        methods: {
            myFunction: function(date) {
                return date;
            }
        }
    }
</script>

Binding multiple attributes to templates in Vue

Sometimes, we want to bind data to an attribute. However, if we had a data attribute called title, and we wrote < input value="title" />, it wouldn't work!

Instead, we have to write <input v-bind:value="title" />, so that Vue knows that title is coming from our Javascript. We can shorten this to :value="title". Our final code will look like this:



    <input :value="title" />

<script>
    export default {
        data() {
            return {
                title: "Some Value"
            }
        }
    }
</script>

Using Javascript in Vue Template Attributes

Single line Javascript can also be used in Vue template attributes using the :attribute syntax. For example, the below code will show input-one as the class if type is set to bold. Otherwise, it will show input-two.



    <input :class="(type == 'bold') ? 'input-one' : 'input-two'" />

<script>
    export default {
        data() {
            return {
                type: "bold"
            }
        }
    }
</script>

Dynamic attributes in Vue Templates

It is also possible to dynamically generate an attribute in Vue by using :[]. Anything we put in the square brackets will be evaluated as Javascript. For example, if we wrote the below:



    <input :[someAttribute]="someValue" />

<script>
    export default {
        data() {
            return {
                someAttribute: 'value',
                someValue: 'My Value'
            }
        }
    }
</script>

Then we the HTML generated would be <input value="My Value" />. Similarly, we can calculate the attribute itself. In the below example, the generated HTML looks like <input data-value="My Value" />.



    <input :['data-' + someAttribute]="someValue" />

<script>
    export default {
        data() {
            return {
                someAttribute: 'value',
                someValue: 'My Value'
            }
        }
    }
</script>

Binding multiple attributes to HTML in Vue

Sometimes, we have multiple attributes we want to bind to one HTML tag, all of which exist in our Javascript. For example, an input may have a value, type, id, and name, all contained within our Javascript. In situations like this, we can use v-bind, to automatically bind all of these attributes straight to the input:



    <input v-bind="allTheAttributes" />

<script>
    export default {
        data() {
            return {
                allTheAttributes: {
                    value: 'Some Value',
                    name: 'main-input',
                    id: 'main-input',
                    type: 'text'
                }
            }
        }
    }
</script>

This code will be translated to the following by Vue:


    <input type="text" name="main-input" id="main-input" value="Some Value">

Conclusion

In conclusion, Vue templating is a powerful way to add data and Javascript straight into your HTML, so you can display it reactively to users. In this article we've covered:

How to use templates with curly brackets in Vue
How to add HTML into your Vue templates
How to bind multiple attributes to an HTML tag in Vue
How to dynamically create attribute names in Vue templates
How to add Javascript expressions straight into your Vue templates

For more Vue content, click here.

Last Updated 1646653488048