Sometimes, we want to load external templates in Vue.js components.

In this article, we’ll look at how to load external templates in Vue.js components.

How to load external templates in Vue.js components?

To load external templates in Vue.js components, we can use the httpVueLoader in Vue 2 and Vue.defineAsyncComponent method in Vue 3.

For instance, we write

new Vue({
  components: {
    "my-component": httpVueLoader("MyComponent.vue"),
  },
});

to register the my-component component by calling httpVueLoader with the Vue component path in Vue 2.

And in Vue 3, we write

Vue.createApp({
  components: {
    "my-component": Vue.defineAsyncComponent(() =>
      loadModule("./MyComponent.vue", opts)
    ),
  },
});

to register my-component by assigning it to the component object that’s returned with Vue.defineAsyncComponent.

Conclusion

To load external templates in Vue.js components, we can use the httpVueLoader in Vue 2 and Vue.defineAsyncComponent method in Vue 3.