In my opinion, the best way to achieve this would likely be through vuex.
To do this, you would place the modal component at the root of your app, just before the closing body tag:
<div id="app">
...
<modal v-if"showModal" inline-template>
<div v-html="modalContent"></div>
</modal>
</div>
</body>
Next, create a vuex store that will handle toggling the modal and setting its content:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
new Vuex.Store({
state: {
showModal: false,
modalContent: '',
},
mutations: {
toggleModal: (state) => {
state.showModal = !state.showModal
},
setModalContent: (state, content) => {
state.modalContent = content
},
},
})
Register the store with your app and create a computed property for showModal:
import store from './vuex/store'
new Vue({
el: '#app',
store,
computed: {
showModal () {
return store.state.showModal
},
...
})
Ensure that the modal component is watching the value of state.modalContent:
modal component
export default {
computed: {
modalContent () {
return this.$store.state.modalContent
},
...
Now, you can use the vuex store mutations in any component to update the modal's content and toggle its visibility:
example component
export default {
mounted () {
this.$store.commmit('setModalContent', '<h1>hello world</h1>')
this.$store.commmit('toggleModal')
...