How do I create multiple Vue instances on the same .js file?

Question

I'm trying to add two Vue.js instance to the same .js file as follows :

new Vue({
  el: '#step1',
  data: {
    value1: '',
  }
})


new Vue({
  el: '#step2',
  data: {
    value2: '',
  }
})

I call these two instances in two separate web pages. But I'm getting a Vue warning such as [Vue warn]: Cannot find element: #step1 not found or [Vue warn]: Cannot find element: #step2 not found. Am I doing it wrong? or is there any way that I can concatenate the two instances together?

Robert Dundon · Accepted Answer · 2018-02-05 22:35:16Z

5

If you must design your code this way, you could test if the element is on that page first before instantiating the Vue instance:

if( document.getElementById("step1") ) {
    new Vue({
      el: '#step1',
      data: {
        value1: '',
      }
    })
}

if( document.getElementById("step2") ) {
    new Vue({
      el: '#step2',
      data: {
        value2: '',
      }
})

edited Feb 5, 2018 at 22:35

Robert Dundon

1,1681 gold badge12 silver badges23 bronze badges

answered Nov 13, 2015 at 15:45

Douglas.Sesar

4,4705 gold badges31 silver badges38 bronze badges

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

5 Comments

Pedro Moreira Over a year ago

This doesn't solve anything. If in the page 2 there is a #step1 element, everything will break. You can't make sure that all the ids in a view are unique across all views.

Douglas.Sesar Over a year ago

If you are the one writing the code, then you can certainly come up with a naming convention that will be a unique/dynamic value based on the route or page id

Pedro Moreira Over a year ago

In my case, the code already exists. We have lots of views with simple, short ids that make sense in the context of each view. We can't manage to refactor all of that. Even if it were possible, this solution becomes heavy if you have lots of views: for each view, you will perform getElementById N times, being N the number of total views you have.

Douglas.Sesar Over a year ago

I would not have included all of your vue js code in one file that loads on every page. I would dynamically load the js on each page that needs it.

Pedro Moreira Over a year ago

Why not? That's the way big companies do it.

Collectives™ on Stack Overflow

How do I create multiple Vue instances on the same .js file?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related