Load vuetify into vue custom element widget

[mirko-lavalle]

I'm trying to create a vue 3 custom element with vuetify 3 with no luck. No issues with vue 2 and vuetify 2 using vue-custom-element library. I want to do the same with vue 3 and vuetify 3.
Can someone tell me the right way to achieve that?
When I remove the tag from component built as custom element, it loads the widget but it returns the following error:

[Vuetify] Could not find defaults instance

Adding vuetify component it can not load the entire widget:
runtime-core.esm-bundler.js:244 Error: [Vuetify] Could not find defaults instance
TypeError: Cannot read properties of null (reading 'parentElement')

[MBERoxit]

I had similar issues once. Was able to solve it by using the following as an example
https://rimdev.io/vue-3-custom-elements/

[mirko-lavalle]

Thank you for your reply.
I solved the problem with something as you suggested.

I defined custom element like this:

// lib.js
import { defineCustomElement } from './includeChildrenStyles';
import ComponentMain from './components/ComponentMain.vue'
import vuetify from './plugins/vuetify'

const CustomElementComponent = defineCustomElement(ComponentMain, {
   plugins: [ vuetify ]
})
customElements.define('component-main', CustomElementComponent);

// includeChildrenStyles.js
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

const nearestElement = (el) => {
   while (el?.nodeType !== 1)  {
      el = el.parentElement
   }
   return el
}

export const defineCustomElement = (component, { globalComponents = {}, plugins = [] } = {}) =>
   VueDefineCustomElement({
      props: component.props,
      styles: component.styles.map((style) => {
         return style
           .replace(":root", ":host") // <- rename :root values to :host
           //.replace("body {", "#my-app {"); // <- in case of frameworks like bootstrap that styles directly body
      }),
      setup(props) {
         const app = createApp()

         plugins.forEach(app.use)

         Object.entries(globalComponents).forEach(([name, comp]) => app.component(name, comp))

         app.mixin({
            mounted() {
               const insertStyles = (styles) => {
                  if (styles?.length) {
                     this.__style = document.createElement('style')
                     this.__style.innerText = styles.join().replace(/\n/g, '')
                     nearestElement(this.$el).prepend(this.__style)
                  }
               }

               insertStyles(this.$?.type.styles)
               if (this.$options.components) {
                  for (const comp of Object.values(this.$options.components)) {
                     insertStyles(comp.styles)
                  }
               }
            },
            unmounted() {
               this.__style?.remove()
            },
         })

         const inst = getCurrentInstance()
         Object.assign(inst.appContext, app._context)
         Object.assign(inst.provides, app._context.provides)
         return () => h(component, props)
      },
})

Vuetify components are now recognized and basic styles are used (importing @import 'https://cdnjs.cloudflare.com/ajax/libs/vuetify/3.1.10/vuetify.min.css' in the component ).
and adding this lines:

styles: component.styles.map((style) => {
     return style
       .replace(":root", ":host") // <- rename :root values to :host
       //.replace("body {", "#my-app {"); // <- in case of frameworks like bootstrap that styles directly body
}),

But i have some issues yet like for instance styles related to color="primary" or something like this.

[MBERoxit]

Yes styling can be a nightmare. I bet you are missing the theme-styleheet. Vuetify automagically adds it to the document
You have to make sure that:

• the vuetify theme stylesheet is loaded in your customElement.
• vue-components (with styling) should be named "component".ce.vue (link). Styles of these components should be auto-injected in your customElement
• Some vuetify components use a different stylesheet. eg: datatable is using vuetify-labs.min.css. If you use it, then it should be loaded as well in your customElement