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

memtech3 · 2024-11-04T21:59:41Z

memtech3
Nov 4, 2024

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')

Answered by memtech3

Nov 5, 2024

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 f…

View full answer

memtech3 · 2024-11-04T22:06:19Z

memtech3
Nov 4, 2024
Author

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

0 replies

memtech3 · 2024-11-05T01:46:38Z

memtech3
Nov 5, 2024
Author

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')

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

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

Uh oh!

Uh oh!

memtech3 Nov 4, 2024

Question

Environment

Here’s what I’ve figured out

References used

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

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

Replies: 2 comments

Uh oh!

memtech3 Nov 4, 2024 Author

Uh oh!

Uh oh!

memtech3 Nov 5, 2024 Author

memtech3
Nov 4, 2024

memtech3
Nov 4, 2024
Author

memtech3
Nov 5, 2024
Author