5

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.

1 Answer 1

12

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.

Sign up to request clarification or add additional context in comments.

3 Comments

sorry newbie, is this vuejs1 or 2 ? $ is of vuejs ?
The $ is jQuery. So, just using jQuery's get as an example.
of an async request. You can use whatever you'd want.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.