different ways to render Vue template from a variable without vue router

Question

I am currently using Vue JS and I am not using any router. I am not using stand-alone build and would like to implement with webpack and use it with .vue extension. Looking for better way to render a Vue template using a variable. For example :

// App.Vue
var Loading = {
   template: `<div>Loading...</div>`
}

// main.js
var currentView = Loading;

new Vue({
  el: "#app",
  render(h) {
    return h(currentView);
  }
});

The above example perfectly works fine without any issues. Would like to understand if there is a better way to handle.

Let's say if currentView contains a string like

currentView = "Loading"

render(h) {
  return h(eval(currentView)); // works
  return h([currentView]); // template not found or mount error 
}

How can we replace the value to the template before its passed to render function ?

Thanks in advance.

Giap Nguyen · Accepted Answer · 2017-08-16 01:55:38Z

1

h is Vue's createElement is use to create virtual Dom element. Same as browser's createElement which use to create real Dom element. So it only work with virtual Dom not string. If you want your second example work, you must register a component named "Loading".

var Loading = {
   template: `<div>Loading...</div>`
}

// main.js
var currentView = "Loading";

new Vue({
  el: "#app",
  render(h) {
    return h(currentView);
  },
  components: {
     Loading: Loading //register Loading component as "Loading"
  }
});

Or register it as global Loading component

Vue.component("Loading", Loading);

answered Aug 16, 2017 at 1:55

Giap Nguyen

6287 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

different ways to render Vue template from a variable without vue router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related