Best approach to change variable value outside of Vue component

Question

I am searching for the best approach to change Vue variable value outside of component. I'm using Vue webpack as well.

I have created a project using vue webpack. Inside its default App.vue file, I have a variable. For example, let's take showModal and its default value is false. Then I built it in a single javascript file.

<button>Register</button> {{-- event button --}}
<div id="guest"></div> {{-- Here I'm rendering my template --}}

<script src="{{ asset('js/vue-js/guest.js') }}"></script> {{-- builded Javascript file --}}

And the problem is that I want to change my showModal variable to true, but the event button it is not on my component template.

What is the best approach to accomplish this?

Answer 1

If you want to access a vue component outside of vue you could register it to the window object and access it then from anywhere.

window.myVueComponent = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Now you can access it from anywhere else with

window.myVueComponent.myValue = 123

But this "style" is called global namespace pollution for reasons. ;)

I think it is better to extend your vue app so that the button is also within the vue-handled components.