diff --git a/packages/dockview-vue/src/utils.ts b/packages/dockview-vue/src/utils.ts index a4e18a5fe..7f5f0762e 100644 --- a/packages/dockview-vue/src/utils.ts +++ b/packages/dockview-vue/src/utils.ts @@ -72,6 +72,10 @@ export function mountVueComponent>( let vNode = createVNode(component, Object.freeze(props)); vNode.appContext = parent.appContext; + vNode.appContext.provides = { + ...(vNode.appContext.provides ? vNode.appContext.provides : {}), + ...((parent as any).provides ? (parent as any).provides : {}), + }; render(vNode, element); diff --git a/packages/docs/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts index 472011956..b3da317e0 100644 --- a/packages/docs/templates/dockview/basic/vue/src/index.ts +++ b/packages/docs/templates/dockview/basic/vue/src/index.ts @@ -7,6 +7,7 @@ import { } from 'dockview-vue'; const Panel = defineComponent({ + inject: ['vu3ProvideInjectEvidenceTestMessage'], name: 'Panel', props: { params: { @@ -14,14 +15,27 @@ const Panel = defineComponent({ required: true, }, }, - setup(props) { + data() { return { - title: props.params.api.title, + title: '', + message: this.vu3ProvideInjectEvidenceTestMessage ?? 'not found', + }; + }, + mounted() { + const disposable = this.params.api.onDidTitleChange(() => { + this.title = this.params.api.title; + }); + this.title = this.params.api.title; + + return () => { + disposable.dispose(); }; }, template: `
Hello World +
{{title}}
+
{{message}}
`, }); @@ -40,6 +54,11 @@ const App = defineComponent({ }); }, }, + provide() { + return { + vu3ProvideInjectEvidenceTestMessage: 'Hello from the provider', + }; + }, template: `