A Vue component that emulates the features of ng-include from Angular v1.x

async-template.js

import Vue from 'vue';
import axios from 'axios';

const AsyncTemplateComponent = Vue.component('async-template', function(resolve) {
  resolve({
    name: 'async-template',
    props: {
      url: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // might show depending on how the loading goes - we are using a Loading component below
        template: '<div class="loading">Loading...</div>',
      }
    },
    mounted() {
      axios.get(this.url, {
        params: this.params || null,
        headers: {
          'Accept': 'text/html',
        },
      })
        .then(({ data }) => {
          // updating the data triggers a render
          this.template = data;
        });
    },
    render(createElement) {
      // create a wrapper for the response HTML
      const compiledTemplate = Vue.compile(`<div
        class="async-template"
        data-url="${this.url}"
        v-html="template"></div>`);

      // return the rendered template and use this component as the invoker
      return compiledTemplate.render.call(this, createElement);
    },
  });
});

const AsyncTemplate = () => ({
  component: AsyncTemplateComponent,
  // A component to use while the async component is loading
  loading: import('Components/Loading.vue'),
  // A component to use if the component fails to load or has a fatal error
  error: import('Components/Error.vue'),
})

export default AsyncTemplate;

example.html

<!-- templateUrl = https://example.com/markup.html -->
<!-- This: -->
<async-template :url="templateUrl"></async-template>
<!-- Will be replace with: -->
<div class="async-template" data-url="https://example.com/markup.html">
    <!-- eval'd contents of https://example.com/markup.html -->
    <!-- https://example.com/markup.html can be a Vue template -->
</div>