How to use Vuetify 3 components in an own programmatically called component, e.g. open a dialog?

I want to call a custom dialog with this.$dialog.open('some message')

My own dialog component uses some vuetify components.

I always got the error Error: [Vuetify] Could not find defaults instance

Did somebody has an example how to define a component, that it could use vuetify?

This is what i try (shortened version):

main (without imports, etc.)

const app = createApp(App)
app.use(createVuetify())
app.use(dialog)

dialog

export default {
  install: (app) => {
    const instance = createInstance()
    app.config.globalProperties.$dialog = instance
    app.provide('$dialog', instance)
  },
}

function createInstance() {
  return {
    open(message) {
      const instance = createComponent(Dialog, { message }, document.body)
      return {
        dismiss: instance.ctx.dismiss
      }
    }
  }
}

function createComponent(component, props, parent, slots = {}) {
  const vNode = h(component, props, slots)
  render(vNode, parent)
  return vNode.component
}

dialog.vue

<template>
  <v-dialog v-model="dialog" persistent width="auto">
    <v-card>
      {{ message }}
    </v-card>
  </v-dialog>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Dialog',
  props: {
    message: { type: String, required: true },
  },
  data: () => ({ dialog: true }),
  methods: {
    dismiss() {},
  },
})
</script>

You are very close. Only the VNode you create in your createComponent() function is not registered to the current app, so it does not have access to the Vuetify components (or any data from app). To give it access, you can register the app in the VNode, all you have to do is to pass the app to createComponent() and then set the appContext property:

vNode.appContext = app._context

all in all, this gives you:

function createComponent(app, component, props, parent, slots = {}) {
const vNode = h(component, props, slots)
vNode.appContext = app._context
render(vNode, parent)
return vNode.component
}

Here it is in a snippet:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

const { createApp, ref, defineComponent, h, render } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const App = {
inject:['$dialog'],
methods: {
showDialog(){
console.log(this)
this.$dialog.open('go go go')
}
}
}
const Dialog = {
template: `
<v-dialog v-model="dialog" persistent width="auto">
<v-card>
<v-card-text>{{ message }}</v-card-text>
</v-card>
</v-dialog>
`,
name: 'Dialog',
props: {
message: { type: String, required: true },
},
data: () => ({ dialog: true }),
methods: {
dismiss() {},
},
}
const dialog = {
install: (app) => {
const instance = createInstance(app)
app.config.globalProperties.$dialog = instance
app.provide('$dialog', instance)
},
}
function createInstance(app) {
return {
open(message) {
const instance = createComponent(app, Dialog, { message }, document.body)
return {
dismiss: instance.ctx.dismiss
}
}
}
}
function createComponent(app, component, props, parent, slots = {}) {
const vNode = h(component, props, slots)
vNode.appContext = app._context
render(vNode, parent)
return vNode.component
}
const app = createApp(App)
app.use(vuetify)
app.use(dialog)
app.mount('#app')

<!-- language: lang-html -->

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-btn @click="showDialog">Show</v-btn>
</v-main>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

<!-- end snippet -->