How do I register vue single file components with dockview so that I can register them as dockview panels?

[memtech3]

Question

How do I register my vue single file components with dockview so that I can register them as dockview panels?

The docs state that “You can register panels through the dock option components” does this mean there should be a components option I can pass my key value pair to?

Environment

Vue 3 single page application compiled with vite, using single file components

Here’s what I’ve figured out

findcomponet expects parent.componets to be a list of key value pairs of {“componentNameString”: component} but I’m not sure how to add my vue components to parent.components.

parent is the parent component’s vue ComponentInternalsInstance

References used

https://github.com/mathuo/dockview/blob/master/packages/dockview-vue/src/utils.ts line 39
https://dockview.dev/docs/core/panels/register
https://codesandbox.io/p/sandbox/github/mathuo/dockview/tree/gh-pages/templates/dockview/update-title/vue?file=%2Fsrc%2Findex.ts

Potential changes to dockview-vue to make registering vue components easier

• add a prop to the dockview-vue component for the user to pass in the key value pair of components
• allow the user to pass the vue component itself into the component property of the addPanel function instead of passing a string used to select the component from the global key value pair of components

Here's what I've tried (irrelevant lines removed for easier reading)

// ./src/DockView.vue

<script setup lang="ts">
import { DockviewVue } from 'dockview-vue'

import type { DockviewReadyEvent } from 'dockview-vue'

const onReady = (event: DockviewReadyEvent) => {
  const panel = event.api.addPanel({
    id: 'panel_1',
    component: 'unitstable',
    title: 'Units Table'
  })
}

</script>
<template>
  <DockviewVue style="width: 100%; height: 100%" class="dockview-theme-abyss" @ready="onReady" />
</template>

// ./src/Components/UnitsTable.vue

<script setup lang="ts">
import Panel from '@/components/Common/Panel.vue'
import { computed } from 'vue'

import { useRepo } from 'pinia-orm'
import { UnitEntity } from '@/stores/units'

const unitsRepo = computed(() => {
  return useRepo(UnitEntity)
})
</script>
<template>
  <Panel>
    <template v-slot:body>
      <div class="row g-0">
        <table class="table table-sm table-hover">
          <thead>
            <tr>
              <th scope="col">Unit</th>
              <th scope="col">Type</th>
              <th scope="col">Status</th>
              <th scope="col">Location</th>
              <th scope="col">Assigned Event</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="unit in unitsRepo.withAll().get()" :key="unit.id">
              <th scope="row">{{ unit.callsign }}</th>
              <td>{{ unit.unitType }}</td>
              <td>{{ unit.status }}</td>
              <td>{{ unit.location }}</td>
              <td>{{ unit.assignedEvent?.id }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
  </Panel>
</template>
@/stores/units

// ./src/main.ts


import { createApp } from 'vue'
import router from './router'

import '@/main.scss'
import 'dockview-vue/dist/styles/dockview.css'

import DockView from './DockView.vue'

const app = createApp(DockView)

app.mount('#app')

[memtech3]

Looks like this is almost a dupe of #608 with more diagnostic information

[memtech3]

Ah! Figured it out! Meta AI suggested this:
app.component('UnitsTable', UnitsTable) in main.ts

Here's the full main.ts file:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'

import { PiniaSharedState } from 'pinia-shared-state'

import App from './App.vue'
import router from './router'

import '@/main.scss'
import 'fundamental-styles/dist/theming/sap_horizon_dark.css'
import '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon_dark/css_variables.css'
import 'dockview-vue/dist/styles/dockview.css'

import urql, { cacheExchange, fetchExchange } from '@urql/vue'

import DockView from './DockView.vue'
import UnitsTable from './components/UnitsTable.vue'

const app = createApp(DockView)

app.use(
  createPinia()
    .use(createORM())
    .use(PiniaSharedState({ enable: true }))
)
app.use(router)

app.use(urql, {
  url: 'http://localhost:5107/graphql',
  exchanges: [cacheExchange, fetchExchange]
})

app.component('UnitsTable', UnitsTable)

app.mount('#app')