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.

vue file

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 undefined Is 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)

I've tried http-vue-loader and it works fine. This library is easy to use and has good documentation and examples

Although you can't load templates from filed directly you still can keep html in separate single-file components. You can even skip <script>...</script> part.

Usage (from loader's documentation)

my-component.vue

<template>
    <div class="hello">Hello {{who}}</div>
</template>

index.html

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
  </head>

  <body>
    <div id="my-app">
      <my-component></my-component>
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#my-app',
        components: {
          'my-component': httpVueLoader('my-component.vue')
        }
      });
    </script>
  </body>
</html>

Both files should be placed in one folder at the same level

VueJs templating. How to load external templates

Usage (from loader's documentation)

Related

Recent Posts