Is it possible to use the same app multiple times on the same page with VueJS?

Question

I have an project where I retrieve data from my backend and show it on the frontend using vue.js, I need to use the same app multiple times OR use an app in an app.

Here's an example, https://jsfiddle.net/Lsc7hggs/4/ :

<!-- app in app -->
<div class="colorHandler">
    <div class="nameHandler">
         <p>[% nameAttr() %]</p>
         <p>[% nameAttr() %]</p>
         <p>[% randomColor() %]</p>
         <p>[% randomColor() %]</p>
    </div>
</div>

<hr> <!-- OR -->

<!-- multiple time the same app -->
<div class="nameHandler">
  <p>[% nameAttr() %]</p>
</div>

<div class="nameHandler">
  <p>[% nameAttr() %]</p>
</div>

<div class="colorHandler">
<p>[% randomColor() %]</p>
</div>

<div class="colorHandler">
<p>[% randomColor() %]</p>
</div>

Is there a way to make this work ?

Could you achieve the results you want using components? One Vue and then multiple copies of a component within the Vue? — admcfajn
– admcfajn, Commented May 21, 2017 at 16:16
@admcfajn Yes as long as I can use multiple time the different Vue next to each other — Horai Nuri
– Horai Nuri, Commented May 21, 2017 at 16:32
Passing variables between components can get a little hairy, have a look at this, it uses more than one Vue to let different components 'talk' to each other: alligator.io/vuejs/global-event-bus — admcfajn
– admcfajn, Commented May 21, 2017 at 16:35

Bert · Accepted Answer · 2017-05-21 16:15:55Z

3

It's not possible to have nested Vues.

You can create multiple Vues.

const colorHandlers = Array.from(document.querySelectorAll(".colorHandler"))
for (let handler of colorHandlers){
  new Vue({
    el: handler,
    methods:{
      randomColor:function(){
        var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
        var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
        var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
        var randomElement = parsed_colors[randomIndex];
        return randomElement
      }
    },
    delimiters: ["[%","%]"]
  });
}

const nameHandlers = Array.from(document.querySelectorAll(".nameHandler"))
for (let handler of nameHandlers) {
  new Vue({
    el: handler, 
    methods:{
      nameAttr:function(){
        var nom_prenom = 'John Doe';
        return nom_prenom
      }
    },
    delimiters: ["[%","%]"]
  });
}

Your updated fiddle.

But you could also do this.

new Vue({
    el:"#app",
    methods:{
    randomColor:function(){
        var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
        var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
        var randomIndex = Math.floor(Math.random() * parsed_colors.length); 
        var randomElement = parsed_colors[randomIndex];
        return randomElement
    },
    nameAttr:function(){
      var nom_prenom = 'John Doe';
      return nom_prenom
    }
  },
  delimiters: ["[%","%]"]
})

Updated fiddle.

edited May 21, 2017 at 16:15

answered May 21, 2017 at 16:09

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

2 Comments

Horai Nuri Over a year ago

The second proposition is the best one, but the first is interesting for another use case so let it there :)

Bert Over a year ago

@lindow generally, I try to answer the specific question and then see if I can offer a better solution :)

Drew Bartlett · Accepted Answer · 2017-07-11 21:09:12Z

1

I actually wrote a small package based off Bert's answer. It allows the Syntax:

import MultiVue from 'vue-multivue';
import AwesomeComponent from './Components/AwesomeComponent.vue';

new MultiVue('.my-app', {
   components: {
       AwesomeComponent
   }
});

The package is here: https://github.com/drewjbartlett/vue-multivue

answered Jul 11, 2017 at 21:09

Drew Bartlett

1,9115 gold badges23 silver badges38 bronze badges

Collectives™ on Stack Overflow

Is it possible to use the same app multiple times on the same page with VueJS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related