In Vue.js, you can compile and render templates fetched from an external API by utilizing the render function and the Vue.compile() method.

Here’s a step-by-step guide:

  1. Fetch the template from the external API.
  2. Compile the fetched template using Vue.compile().
  3. Render the compiled template using the render function.
  4. Mount the rendered component onto a Vue instance.

Here’s an example implementation:

 <div ref="dynamicComponent"></div>
import Vue from 'vue';
export default {
 async mounted() {
   try {
     // Fetch template from external API
     const response = await fetch('');
     const templateText = await response.text();
     // Compile the fetched template
     const { render } = Vue.compile(templateText);
     // Render the compiled template
     const vm = new Vue({

     // Mount the rendered component
   } catch (error) {
     console.error('Error fetching or rendering template:', error);

In this example:

  • The template is fetched from an external API using fetch.
  • The fetched template is compiled using Vue.compile(), which returns a render function.
  • A new Vue instance is created with the compiled render function.
  • The rendered component is mounted onto the DOM element referenced by this.$refs.dynamicComponent.

This approach allows you to dynamically load and render templates fetched from an external API in a Vue.js application. Make sure to handle errors appropriately, such as when the template fetching fails or when the fetched template cannot be compiled.

Support On Demand!