VueJs templating. How to load external templates

You can use the script tag template by just referring to its id.

{  template: '#some-id'}

Though, I highly recommend using vueify (if you use browserify) or vue-loader (if you use webpack) so you can have your components stored in nice little .vue files like this.

Also, the author of Vue wrote a nice post about the topic of external template urls:

https://vuejs.org/2015/10/28/why-no-template-url/

You can try this:
for Vue2 : https://github.com/FranckFreiburger/http-vue-loader
for Vue3 : https://github.com/FranckFreiburger/vue3-sfc-loader

Example (Vue2) :

 new Vue({        components: {            'my-component': httpVueLoader('my-component.vue')        },        ...

Example (Vue3) :

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

David, that is a nice example, but what's the best way to make sure the DOM is compiled?

https://jsfiddle.net/q7xcbuxd/35/

When I simulate an async operation, like in the example above, it works. But as soon as I load an external page "on the fly", Vue complains because the DOM is not ready.More specifically:Uncaught TypeError: Cannot set property 'vue' of undefinedIs there a better way to do this than to call $compile when the page has loaded? I've tried with $mount, but that didn't help.

UPDATE:Never mind, I finally figured out how to do it:

Vue.component('async-component', function (resolve, reject) {    vue.$http.get('async-component.html', function(data, status, request){        var parser = new DOMParser();        var doc = parser.parseFromString(data, "text/html");        resolve({            template: doc        });    });});

And in the actual template, I removed the

<script id="someTemplate" type="text/x-template"></script>

tags and only included the html.

(This solution requires the http loader from https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js)