Support usage of vue mounting helpers in a context without existing pinia/vue....

import BootstrapVue from "bootstrap-vue";

import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";

import { getActivePinia, PiniaVuePlugin } from "pinia";

import { createPinia, getActivePinia, PiniaVuePlugin } from "pinia";

import Vue from "vue";

// Load Pinia

// font-awesome svg icon registration/loading

Vue.use(iconPlugin);

function getOrCreatePinia() {

    // We sometimes use this utility mounting function in a context where there

    // is no existing vue application or pinia store (e.g. individual charts

    // displayed in an iframe).

    // To support both use cases, we will a new pinia store and attach it to the

    // vue application that is created for the component.

    let pinia = getActivePinia();

    if (!pinia) {

        pinia = createPinia();

    }

    return pinia;

}

export const mountVueComponent = (ComponentDefinition) => {

    const component = Vue.extend(ComponentDefinition);

    const pinia = getActivePinia();

    return (propsData, el) => new component({ propsData, el, pinia });

    return (propsData, el) => new component({ propsData, el, pinia: getOrCreatePinia() });

};

export const replaceChildrenWithComponent = (el, ComponentDefinition, propsData = {}) => {

    const container = document.createElement("div");

    el.replaceChildren(container);

    const component = Vue.extend(ComponentDefinition);

    const pinia = getActivePinia();

    const mountFn = (propsData, el) => new component({ propsData, el, pinia });

    const mountFn = (propsData, el) => new component({ propsData, el, pinia: getOrCreatePinia() });

    return mountFn(propsData, container);

};