30-days-cover-image

30 Days of Vue

How to Declare the Template and Markup of a Vue Component

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

How to Declare the Template and Markup of a Vue Component

Today, we'll be taking a look at some of the different ways we can declare the template/markup of a component.

For all the components we’ve seen so far, we’ve used either standard strings or template literals to define the component template. In this article, we'll summarize why we use either strings or template literals before investigating some other ways of defining the template of a component.

Component Templates

Template Strings

The template option of a component expects a string, so we’re able to define the entire markup of a component within standard strings.

Here's an example of the root instance template rendering a single-line-template component while passing in a message prop.

src/standard-strings-template/index.html
    <div id="app">
      <single-line-template :message="message">
      </single-line-template>
    </div>

The template of the single-line-template component is kept within standard strings.

src/standard-strings-template/main.js
let singleLineTemplate = {
  template: '<div class="card"><header class="card-header\
    card-header-title">{{ message }}</header></div>',
  props: ['message']
}

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  components: {
    'single-line-template': singleLineTemplate
  }
});

Live version - https://30dofv-singlestringtemp.surge.sh

Standard strings (i.e. ‘ ‘ ) in JavaScript expect the string to be defined in a single line which can make reading the markup of a component difficult. If we wanted to break our component template into multi-line format - we can take advantage of ES6 Template Literals (i.e. back-ticks).

let multiLineTemplate = {
  template: `
    <div class="card">
      <header class="card-header card-header-title">
        {{ message }}
      </header>
    </div>
   `,
  props: ['message']
}

Template literals is an unsupported ES6 feature in older browsers like IE11.

In addition to defining the template in strings, the Vue documentation highlights two other alternative definitions - inline templates and x-templates.

Inline Templates

Inline templates allow us to simply regard the inner content of a declared component as its template. This is achieved by using the special inline-template keyword on the component.

To see an example of this, we'll first declare a local inlineTemp component object that expects a message prop.

In the root template, we can render the inline-temp component and pass in the message data as props.

<div id="app">
  <inline-temp :message="message"></inline-temp>
</div>

As of this moment, the inline-temp component has no template and nothing will be shown. We can use the inline-template keyword and declare the template of the component as the inner content between the component opening and closing tags.

src/inline-template/index.html
      <inline-temp :message="message" inline-template>
        <div class="card">
          <header class="card-header card-header-title">
            {{ message }}
          </header>
        </div>
      </inline-temp>

Live version - https://30dofv-inlinetemplates.surge.sh

The Vue documentation states that inline templates make it harder to understand the template of a component and as a best practice, should usually not be used.

X Templates

With x-templates, we’re able to use <script> tags to define pockets of markup that represent the templates of components. To recreate the same example above with x-templates, we'll instantiate a xTemp component object with the template property given a value of #x-template-component. We can have the component registered in the root instance as well.

 

This page is a preview of 30 Days of Vue

Get the rest of this chapter and 330+ pages of Vue instruction for free.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get Started Now Background Image

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.