Are multiple Vuejs instances possible?

Question

Consider this simplified example of a real-world app:

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <div id="subapp">
        <p>
          {{ message}}
        </p>
      </div>
      <p>{{ message }}</p>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })

      new Vue({
        el: '#subapp',
        data: {
          message: '¡Hola Vue.js!'
        }
      })

    </script>
  </body>
</html>

I'd expect to see two different messages, but i get the same message twice. If i change message to other_message in the 'subapp', Vuejs complains that it can not find other_message.

Is there a way to "embed" them together? Short of un-embedding the html part or merging the controllers, is there a way of getting the expected result? Alternatively, is there a better term for what i'm trying to accomplish? (english is hard sometimes)

You could use components. Define a component (contains the controller and the view) and you can use that component twice. But a better answer could be given if you could give more details though — ka_lin
– ka_lin, Commented Dec 12, 2017 at 13:02

samayo · Accepted Answer · 2017-12-12 14:40:50Z

8

Like @ka_lin has said, you should use components for this. They are the perfect tools for this.

Otherwise it is almost impossible to do, specially with the example you have presented. There is no way Vuejs can recognize to which instance {{ message }} belongs to.

The closest you can achive a 'similar' feature is to distribute the scope of your vue instance to two elements as:

new Vue({
 el: '#app1',
 data () {
   return {
     message: 'Hello'
   }
 },
})

new Vue({
 el: '#app2',
 data () {
   return {
     message: 'Helloa'
   }
 }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app1">
  {{ message }}
</div>

<div id="app2">
  {{ message }}
</div>

edited Dec 12, 2017 at 14:40

answered Dec 12, 2017 at 13:34

samayo

16.5k13 gold badges95 silver badges114 bronze badges

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

3 Comments

Takeshi Tokugawa YD Over a year ago

What if we don't know in advance, how many <div id="appN"> will be?

samayo Over a year ago

@GurebuBokofu I suppose you could use getElementsById with some regex to capture all the divs and use foreach loop. But I wouldn't do that. I haven't been using vue for a year, so you should better ask it in the main site

Nebulosar Dec 1, 2024 at 20:05

You could easily make a mount fn and give the id. Then you can just call that every time

فاعل خير · Accepted Answer · 2019-10-26 19:47:06Z

1

Try such an example:-

  const App = new Vue({
    el: '#app',
    data: {
      aa: 'Hello Vue!', }

  })
  const vvv2 = new Vue({
    el: '#vvv',
    data: {
      bb: 'Hello Vue!55555555555', }

  })

answered Oct 26, 2019 at 19:47

فاعل خير

111 bronze badge

Comments

Evgeny Naumov · Accepted Answer · 2023-07-06 12:32:22Z

0

In Vue3 you aren't limited of app instances. You can create unlimited instances.

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

https://vuejs.org/guide/essentials/application.html#multiple-application-instances

answered Jul 6, 2023 at 12:32

Evgeny Naumov

3771 gold badge4 silver badges17 bronze badges

1 Comment

Nebulosar Dec 1, 2024 at 20:03

How to tell composables apart?

Collectives™ on Stack Overflow

Are multiple Vuejs instances possible?

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Related