How to call/initlialize a vue method from outside of the Vue APP

Question

I have an app that is mounted within the page of a preexisting website. In order to initialize the app i have a button within my Vue app to toggle/start the actual Vue logic.

It is all very straight forward, a button appears on the page, click it, the app logic and methods all come to life.

<template>
  <button @click.prevent="toggle">Click me</button>
</template>
<script>

export default {
  computed: {
    isBurgerActive() {
        return this.$store.getters.getIsNavOpen;
    }
  },
  methods: {
    toggle() { <----- CALL THIS METHOD OUTSIDE OF VUE
      this.$store.dispatch('toggleNav');
      this.$store.dispatch('getProduct');
    }
  }    
}
</script>

What i want to do is initialize this app with a button that is not within the Vue app. Essentially saying on click of button outside of the Vue app, initialize the toggle() method and start the whole process off.

Is that possible?

So you want to click a button within the Vue space, to launch the app? I don't understand, also why are you yelling? — Phix, Jan 30 '20 at 02:26
For better context, but it's nice and chill in there now. Yes want to have a click button outside of the Vue APP logic, that just starts off the Vue app. Currently, the page loads, then Vue needs to load to get the button to start the toggle method. Like reaching into Vue and calling a method from outside of Vue. Not sure if that's possible or not. — learncodes123, Jan 30 '20 at 02:29
https://stackoverflow.com/questions/40759731/how-to-call-vue-instance-outside-it-in-javascript I assume this is closely related to what i want, but i am using the Vue CLI they are using the Vue CDN — learncodes123, Jan 30 '20 at 02:33
step 1: first page only a button, no js or vue loaded. step 2: on click on that button, initiate the vue and hit one of that function. Am I right? — hasan05, Jan 30 '20 at 05:42
There is JS, but Vue loads as an APP mounted to id="app" the page is normal HTML,CSS,JS. Trying to use normal JS to trigger the toggle and start the app — learncodes123, Jan 30 '20 at 06:47

score 0 · Answer 1 · answered Jan 30 '20 at 03:19

If you assign the component to a variable. You can call the methods on that variable. In fact, you can access other properties of vue from that variable (ex: refs, data).

Try the snipet below:

var app = new Vue({
  el: "#app",
  data() {
    return {
      isActive: false,
    }
  },
  computed: {
    isBurgerActive() {
        return this.isActive ? 'active':'inactive'
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  },
})

document.getElementById('btn').addEventListener("click", function() {
 app.toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div>
  <button id="btn">
    Click Me
  </button>
</div>

<div id="app">
  <h2>Active: {{ isBurgerActive }}</h2>
</div>

Vue only sits within the Vue CLI app, not on the document page. So i am not sure this will work, you're using the Vue CDN. Although i could try. — learncodes123, Jan 30 '20 at 03:29
If you generate the CLI, you can try to have the button script onclick listener inside index.js right after the vue initialize `var app = new Vue({router, store, ...})`. — Chop TRAN, Jan 30 '20 at 03:40

How to call/initlialize a vue method from outside of the Vue APP

1 Answers1