title: Vue.js and loading pages dynamically with AJAX?
body: <p>In my database web-application I need quite a lot of different pages, one for each table. Which pages are in the application is different for each user, so I don't want to include them all beforehand, because this would make things unneccessary big and maybe slow at startup.</p>
  
  <p>In my application so far I have only 1 <code>Vue</code> instance, that holds the data for all pages, each in its own sub-object of <code>data</code>. Data is loaded on the fly as JSON with <code>vue-resource</code> (using <code>$http.get()</code> ), so at startup <code>data</code> is quite empty.</p>
  
  <p>Now I need a way to load the HTML of the pages dynamically and bind them to the already existing <code>Vue</code> instance. I used to load pages with jQuery, but when I do this in this Vue application, the data is not binded to the content of the loaded page.</p>
  
  <p>I looked into Vue components, but this seems more suited for repeatable (small) elements on a page, and not for entire pages, but please correct me if I'm wrong.</p>
  
  <p>I also came across <code>vueify</code>, <code>browserify</code> and <code>Webpack</code>, but these seem a little too advanced for me right now. I just want to load in some HTML and use it with Vue, like it was already included before.</p>
  
  <p>Could someone please explain the right way to do this?</p>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>Vue <a href="https://vuejs.org/api/#partial" rel="nofollow">partials</a> seem to be a solution :</p>
  
  <p>In your HTML-file :</p>
  
  <p><code>&lt;partial :name="currentModule"&gt;&lt;/partial&gt;</code></p>
  
  <p>and in your Javascript :</p>
  
  <pre><code>  var moduleid = "page1";
    var url = moduleid + ".html";
  
    myvue.$http.get(url, function(data, status, request){
        Vue.partial(moduleid, data);
        myvue.currentModule = moduleid;
    });
  </code></pre>
  
  <p>This uses<code>vue-resource</code> for the AJAX, but this could be done with <code>jquery.ajax()</code> or something else as well.</p>