Reply To: Vue Component in LayoutPanel

[Cher Toggy]

Hi,

I am also interested in this. I have tried using the https://www.htmlelements.com/docs/docking-layout-custom/ but am unsure where docking rendering fits into Vue lifecycle.

<template>
  <div class="vue-root">
    <smart-docking-layout></smart-docking-layout>
  </div>
</template>

<script>
import "smart-webcomponents/source/modules/smart.dockinglayout.js";
import "smart-webcomponents/source/smart.core.js";
import ProjectList from  "./ProjectList";
import {onMounted} from "vue";
import {createApp} from "vue";

export default {
  name: "top-layout",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ProjectList
  },
  setup() {
    onMounted( function() {

      const docking = document.querySelector("smart-docking-layout");
      docking.layout = [
        {
          type: "LayoutGroup",
          orientation: "horizontal",
          items: [
...
                      //content: '<ProjectList msg="Project List"/>'  // --> option 1: preferred 
                      content: ' <div id="projectListComponentPlace"></div>'  // --> option 2: how to mount into this
              ],
      ];

      const ProjectListComponent = createApp(ProjectList);
      const div = document.getElementById('projectListComponentPlace');

      //this.$refs.projectListComponentPlace.appendChild(div);  // <--- cannot find this ref 
      createApp(ProjectListComponent).mount(div)
    });
  },
}