Using Vue.js Components without a .vue Single-File Component

Most of the examples we have seen of Vue.js components have leveraged .vue single-file components.

This is not the only way to define a Vue.js component. In this section, we will look at four different ways to define Vue.js components without using a .vue file.

Evaluating these options will help us understand what a Vue.js component is at its core.

Runtime Definition with a String Template

A component can use a template property that accepts a string value. This is commonly called a string template. This template is evaluated at runtime (in the browser).

We can define a component in the StringTemplate.js file by defining an object with a template property:

export default {
  template: `<div>String Template Component</div>`
}

This can then be consumed from the App.vue file, as follows:

<template>
  <div id="app">
    ...