Vue Components - Template Definitions

#

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.

    <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.

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.

      <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.