I have a quasar project (a framework based on vue.js) that works with vite. In this project, I have a component that displays a modeler. The bpmn is displayed and works well but I would like it to be completely linked to the quasar project, which means that it can interact with the MainLayout.vue for example. how do I do this? Here’s my code 
component.vue
<template>
<div>
<!-- <iframe v-if="iframeLoaded" src="public/assets/index.html" style="width: 100%; height: 87vh; border: none"></iframe> -->
<iframe src="public/modeler.html" style="width: 100%; height: 87vh; border: none"></iframe>
</div>
</template>
<script>
export default {
name: "HubMateBpmnEditor",
props: {
projectData: Object,
},
mounted() {
console.log(this.projectData.title);
},
methods: {
}
};
</script>
Extract from app.js
const HIGH_PRIORITY = 1500;
const containerEl = document.getElementById('container'),
qualityAssuranceEl = document.getElementById('quality-assurance'),
suitabilityScoreEl = document.getElementById('suitability-score'),
lastCheckedEl = document.getElementById('last-checked'),
okayEl = document.getElementById('okay'),
formEl = document.getElementById('form'),
warningEl = document.getElementById('warning'),
titleEl = document.getElementById("title"),
validateTitleEl = document.getElementById("validateTitle"),
labelTitle = document.getElementById("nom"),
formTitleEl = document.getElementById("form1"),
toggleButton = document.getElementById('toggleFormButton'),
descriptionEl = document.getElementById("descr"),
labelDescr = document.getElementById('description'),
dl_bpmn = document.getElementById('js-download-diagram'),
view_bpmn = document.getElementById('js-view-diagram'),
dark_mode = document.getElementById('js-dark-mode');
function CustomModeler(options) {
BpmnModeler.call(this, options);
}
inherits(CustomModeler, BpmnModeler);
// customModule.exports = CustomModeler;
CustomModeler.prototype._customModules = [
customModule,
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
UsernamePropertiesProvider,
PasswordPropertiesProvider,
DropDownPropertiesProvider,
TokenPropertiesProvider,
ApiKeyLocPropertiesProvider,
ApiKeyNamePropertiesProvider,
ApiKeyValuePropertiesProvider,
MethodPropertiesProvider,
UrlPropertiesProvider,
HeaderssPropertiesProvider,
ParametersPropertiesProvider,
ConnectionPropertiesProvider,
ReadPropertiesProvider,
RetriesPropertiesProvider,
ConnectorPayloadPropertiesProvider,
SftpDirectoryPropertiesProvider,
SftpFileNamePropertiesProvider,
SftpSplitPropertiesProvider,
ConnectorPayloadJdbcPropertiesProvider,
JdbcDataSourcePropertiesProvider
];
CustomModeler.prototype._modules = [].concat(
BpmnModeler.prototype._modules,
CustomModeler.prototype._customModules
);
CustomModeler.prototype._moddleExtensions = {
qa: qaExtension,
DropDown: DropDownModdle,
username: UsernameModdle,
password: PasswordModdle,
Token: TokenModdle,
ApiKeyLoc: ApiKeyLocModdle,
ApiKeyName: ApiKeyNameModdle,
ApiKeyValue: ApiKeyValueModdle,
Method: MethodModdle,
Url: UrlModdle,
Headerss: HeaderssModdle,
Parameters: ParametersModdle,
Connection: ConnectionModdle,
Read: ReadModdle,
Retries: RetriesModdle,
ConnectorPayload: ConnectorPayloadModdle,
SftpDirectory: SftpDirectoryModdle,
SftpFileName: SftpFileNameModdle,
SftpSplit: SftpSplitModdle,
ConnectorPayloadJdbc: ConnectorPayloadJdbcModdle,
JdbcDataSource: JdbcDataSourceModdle,
camunda: camundaModdleDescriptor,
};
export default CustomModeler;
// initialise le modeler et gérer les interactions
// create modeler
const sombre = {
defaultFillColor: '#151414',
defaultStrokeColor: '#ffffff'
}
const lumineux = {
defaultFillColor: '',
defaultStrokeColor: ''
}
const bpmnModeler = new CustomModeler({
container: containerEl,
bpmnRenderer: lumineux,
textRenderer: {},
propertiesPanel: {
parent: '#js-properties-panel',
}
});
Thank you for your help