How to conditionally mount root vue instance?

Question

Is there a way, using vue, to check if the element where vue instance should be mounted actually exists? I have cases where this element would not exist and would like to avoid getting errors like these:

[Vue warn]: Cannot find element: #app
[Vue warn]: Error in created hook: "TypeError: Cannot convert undefined or null to object"
TypeError: this.$store.getters[(this.namespace...

The case is: I want to be able to check if the element actually exist before mounting vue. Don't try to mount if there is no element.

What's your concrete case? The div#app should always be available in the index.html. Otherwise you're probably screwing around with the setup. — sandrooco
– sandrooco, Commented Nov 27, 2019 at 8:39
There's no specific mechanism within Vue but you could grab the element using document.getElementById('app') and only initiate Vue if that element exists. Potentially wasteful loading all that JS code if you aren't going to run it though. — skirtle
– skirtle, Commented Nov 27, 2019 at 8:52
I think you can try to use Vue life cycle hooks and you should check especially mounted. More about life cycle hooks you can read here: Vue life cycle — Krzysztof Kaczyński
– Krzysztof Kaczyński, Commented Nov 27, 2019 at 8:53

muka.gergely · Accepted Answer · 2019-11-27 18:36:05Z

1

Just use vanilla JS to check for existing tag.

const storeMounted = new Vuex.Store({
  state: {
    string: "Store mounted"
  }
})

if (document.getElementById('app')) {
  new Vue({
    el: "#app",
    store: storeMounted,
    computed: {
      string() {
        return this.$store.state.string
      }
    },
    mounted() {
      console.log('Mounted to #app')
    }
  })
}

const storeNotMounted = new Vuex.Store({
  state: {
    string: "Store not mounted"
  }
})

if (document.getElementById('noApp')) {
  new Vue({
    el: "noApp",
    store: storeNotMounted,
    mounted() {
      console.log('Mounted to #noApp')
    }
  })
}

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">{{string}}</div>

In the snippet above you can see that no errors are in the console, a Vue instance is mounted in a <div> that has an appropriate ID, and the other one is not mounted.

Vue is very useful - but it's "only" JavaScript :D

EDIT

I added Vuex, so you can see that it doesn't cause any problems.

edited Nov 27, 2019 at 18:36

answered Nov 27, 2019 at 18:28

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

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

2 Comments

equi Over a year ago

Yeah that's pretty much solving my problem :) Still, I'm unsure if something like this should be anticipated by the vue part. Thank you

muka.gergely Over a year ago

I'm happy that I could help. Actually it's in Vue already - $mount('#app'). If you don't use the el attribute in your Vue instance, then you can mount it whenever you want :) stackoverflow.com/questions/46831452/… and official docs: vuejs.org/v2/api/#vm-mount .

Collectives™ on Stack Overflow

How to conditionally mount root vue instance?

1 Answer 1

EDIT

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related