title: Load Vue Componet via AJAX
body: <p>I'd like to load Vue Component via AJAX dynamically and render its template.</p>
  
  <p>Main Vue Instance:</p>
  
  <pre><code>const router = new VueRouter({
      path: '/vue/actions/',
      mode: 'history'
  });
  
  var app = new Vue({
      el: '#mainContainer',
      router,
      data: {
          mainContent: ''
      },
      methods: {
          action: function (url) {
              alert(url);
              this.$router.push({ path: '/vue/actions/?'+url});
              console.log(this.$route.query);
          },
          actions: function () {
              var action;
              if (!this.$route.query.action || this.$route.query.action == 'main') {
                  action = 'index';
              } else {
                  action = this.$route.query.action;
              }
              var mainContent;
              fetch('/vue/actions/?content_type=json&amp;action='+action).then((response) =&gt; {
                  if(response.ok) {
                      return response.json();
                  }
                  throw new Error('Network response was not ok');
              }).then((json) =&gt; {
                  this.$router.push({ path: '/vue/actions/', query: { action: json.action }});
                  // this.mainContent = json.template;
                  console.log(json.template);
                  this.dynamicComponent = json.template;
              }).catch((error) =&gt; {
                  console.log(error);
              });
          }
      },
      created: function () {
          this.actions();
      }
  })
  </code></pre>
  
  <p>Initial Page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="author" content="" /&gt;
      &lt;meta http-equiv='cache-control' content='no-cache'&gt;
      &lt;meta http-equiv='expires' content='0'&gt;
      &lt;meta http-equiv='pragma' content='no-cache'&gt;
      &lt;script type="text/javascript" src="/js/vue.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/vue-router.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;template&gt;&lt;div&gt;&lt;component :is="dynamicComponent"&gt;&lt;/component&gt;&lt;/div&gt;&lt;/template&gt;
  &lt;div id="mainContainer" v-html="mainContent"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="/js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Component I'd like to load via AJAX:</p>
  
  <pre><code>Vue.component('dynamicComponent', {
      template: '&lt;div&gt;Dynamic Component!&lt;/div&gt;'
  });
  </code></pre>
  
  <p>Is it possible to load such Vue Componet and render its template (with an ability to use Vue data bindings in the Component template)?</p>