CODEWITHSUNDEEP
javascriptvue.jsvue-routervuex
Anton Pleshivtsev
Anton Pleshivtsev

Reputation: 151

Is it possible to render Vue app parts to several nodes?

I have a pretty complex page which is now static. I want to make some parts of the page to be dynamic using Vue. Later I want to make all the page to be an SPA, but this is not an option for now.

The question is - is it possible to make a Vue app that renders its components to different parts of the page without making the whole page to be the Vue's element? Something like this:

new Vue({
    store,
    router,
    render: {
      '#header': ReviewsSummaryComponent,
      '#score': ScoreComponent,
      '#reviews': ReviewsComponent,
      '#compliments': ComplimentsComponent
    }
  })

The most important part here is that I want them to share common store, routes and (not mandatory) parent. Is that possible in Vue?

Upvotes: 0

Views: 53

Answers (1)

acdcjunior
acdcjunior

Reputation: 135802

You can... sort of. You can have multiple Vue instances, which would be connected through the store:

new Vue({
  el: "#header",
  store,
  components: { ReviewsSummaryComponent },
  template: "<ReviewsSummaryComponent/>"
});
new Vue({
  el: "#score",
  store,
  components: { ScoreComponent },
  template: "<ScoreComponent/>"
});
new Vue({
  el: "#reviews",
  store,
  components: { ReviewsComponent },
  template: "<ReviewsComponent/>"
});
new Vue({
  el: "#compliments",
  store,
  components: { ComplimentsComponent },
  template: "<ComplimentsComponent/>"
});

As you can see, I have added only the store. Technically, you can add the router to them all as well, but that makes little sense, anyway.

Upvotes: 1

Related Questions