Vue js create component programmatically

I'd imagine the cleanest way of doing this will end up being via vuex.

Therefore you'd set the modal component within the root of your app, as you say before the body tag:

<div id="app">

    ...

    <modal v-if"showModal" inline-template>
        <div v-html="modalContent"></div>
    </modal>

</div>
</body>

Now create a vuex store which will allow you to toggle the modal along with I assume populating it's 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 set a computed prop for showModal (as the template for the root of your app contains the modals component):

import store from './vuex/store'

new Vue({
    el: '#app',
    store,
    computed: {
        showModal () {
            return store.state.showModal
        },
        ...
})

Set the modal component to at least watch the value of state.modalContent:

modal component

export default {

    computed: {
        modalContent () {
            return this.$store.state.modalContent
        },
        ...

Now you can call the vuex store mutations from any component throughout your app to update its content and toggle its visibility:

example component

export default {

    mounted () {

        this.$store.commmit('setModalContent', '<h1>hello world</h1>')

        this.$store.commmit('toggleModal')
        ...