How could Vue.js have templateUrl configure just like Angular.js do?

Issue

I love the simplicity of Vue.js, but I don't want to complexify it with browserify or webpack. I prefer something like templateUrl in Angular, so I can serve the partial page(usually a component) with Nginx directly. How could I set up this? It's not suggested officially, hard to get help there.

Solution

Vue doesn't have anything built in for this specifically as far as I can tell but you'd be able to use async components to fake it if you wanted to.

Vue.component('example', function (resolve, reject) {
  $.get('templates/example.html').done(function (template) {
    resolve({
      template: template
    })
  });
});

You'd also be able to do something like this as well in your HTML.

<div id="app"></div>

<template id="example">
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

Then you can do like:

new Vue({
  el: '#app',
  components: {
    example: {
      template: '#example',
      data: function () {
        return {
          message: 'Yo'
        }
      }
    }
  }
});

Though, I think taking the time to get comfortable with browserify or webpack is well worth the investment. Especially because you can use vueify.

Answered By - Bill Criswell