J'ai un projet quasar (un framework basé sur vue.js) qui fonctionne avec vite. Dans ce projet, j'ai un composant qui affiche un modeleur de bpmn. Le bpmn s'affiche et fonctionne bien mais j'aimerais qu'il soit complètement lié au projet quasar, c'est à dire qu'il puisse interagir avec le MainLayout.vue par exemple. comment faire ? Voici mon 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>

extrait du 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',
  }
});