[Vuejs]-How to conditionally mount root vue instance?

by

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/vuex@3.1.2/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 😀

EDIT

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

👤muka.gergely

Leave a comment