From 4f00347b34dfd9233a57e011701afec747699dc9 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Fri, 21 Jun 2024 09:45:57 -0400 Subject: [PATCH 1/2] Support usage of vue mounting helpers in a context without existing pinia/vue. This fixes charts initialization. --- client/src/utils/mountVueComponent.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/client/src/utils/mountVueComponent.js b/client/src/utils/mountVueComponent.js index 9b06b76f4513..64b09d6b408d 100644 --- a/client/src/utils/mountVueComponent.js +++ b/client/src/utils/mountVueComponent.js @@ -4,7 +4,7 @@ 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 @@ -22,17 +22,28 @@ Vue.use(vueRxShortcutPlugin); // 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); }; From 16b8036b790f8581c3d1e09fe82294b478791fcd Mon Sep 17 00:00:00 2001 From: Dannon Date: Fri, 21 Jun 2024 10:00:25 -0400 Subject: [PATCH 2/2] Update client/src/utils/mountVueComponent.js Co-authored-by: Marius van den Beek --- client/src/utils/mountVueComponent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/utils/mountVueComponent.js b/client/src/utils/mountVueComponent.js index 64b09d6b408d..754f2bfd1b48 100644 --- a/client/src/utils/mountVueComponent.js +++ b/client/src/utils/mountVueComponent.js @@ -26,7 +26,7 @@ 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 + // To support both use cases, we will create a new pinia store and attach it to the // vue application that is created for the component. let pinia = getActivePinia(); if (!pinia) {