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.
In my application so far I have only 1 Vue instance, that holds the data for all pages, each in its own sub-object of data. Data is loaded on the fly as JSON with vue-resource (using $http.get() ), so at startup data is quite empty.
Now I need a way to load the HTML of the pages dynamically and bind them to the already existing Vue 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.
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.
I also came across vueify, browserify and Webpack, 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.
Could someone please explain the right way to do this?
UPDATE
Vue partials1 seem to be a solution :
In your HTML-file :
<partial :name="currentModule"></partial>
and in your Javascript :
var moduleid = "page1";
var url = moduleid + ".html";
myvue.$http.get(url, function(data, status, request){
Vue.partial(moduleid, data);
myvue.currentModule = moduleid;
});
This usesvue-resource for the AJAX, but this could be done with jquery.ajax() or something else as well.
1 - Vue.partial() and <partial /> support have been removed in Vue 2 and above.
