Merge pull request galaxyproject#18299 from guerler/load_pinia_manual…

…_mount

[24.1] Adds pinia to manually mounted vue components

client/src/utils/mountVueComponent.js

@@ -4,8 +4,12 @@
 
 import BootstrapVue from "bootstrap-vue";
 import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
+import { createPinia, PiniaVuePlugin } from "pinia";
 import Vue from "vue";
 
+// Load Pinia
+Vue.use(PiniaVuePlugin);
+
 // Bootstrap components
 Vue.use(BootstrapVue);
 
@@ -18,15 +22,18 @@ Vue.use(vueRxShortcutPlugin);
 // font-awesome svg icon registration/loading
 Vue.use(iconPlugin);
 
+// Create Pinia
+const pinia = createPinia();
+
 export const mountVueComponent = (ComponentDefinition) => {
     const component = Vue.extend(ComponentDefinition);
-    return (propsData, el) => new component({ propsData, el });
+    return (propsData, el) => new component({ propsData, el, pinia });
 };
 
 export const replaceChildrenWithComponent = (el, ComponentDefinition, propsData = {}) => {
     const container = document.createElement("div");
     el.replaceChildren(container);
     const component = Vue.extend(ComponentDefinition);
-    const mountFn = (propsData, el) => new component({ propsData, el });
+    const mountFn = (propsData, el) => new component({ propsData, el, pinia });
     return mountFn(propsData, container);
 };