Load vuetify plugin in a custom element

[mirko-lavalle]

Hello,
I'm trying to build a custom element with vue3 and vuetify 3. No issue to achieve that with vue 2 and vuetify 2 using vue-custom-element, but a lot of issues with new versions 3.

This is my lib.js used to build custom element:

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

const ComponentCustomElement = defineCustomElement({
   ...ComponentMain,
   vuetify
})
customElements.define('component-main', ComponentCustomElement);

This is my vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { VuetifyPlugin } = require('webpack-plugin-vuetify')

module.exports = defineConfig({
	transpileDependencies: true,

  	chainWebpack: (config) => {
		console.log("NOD ENV: " + process.env.NODE_ENV);
		if(process.env.NODE_ENV == "production") {
			config.module
				.rule('vue')
				.use('vue-loader')
				.tap((options) => {
					options.customElement = true
					return options
				})
		}
 	},

	configureWebpack: {
		plugins: [
			new VuetifyPlugin({ autoImport: true })
		],
	},
        .........
})

this is the script i run to build the custom element as library:
vue-cli-service build --target lib --inline-vue --name component-main ./src/lib.js

When i load component in html page it can not properly load vuetify components and it returns the following errors:
Error: [Vuetify] Could not find defaults instance TypeError: Cannot read properties of null (reading 'parentElement')

If i remove tag from component template it loads all but with no vuetify.
What is wrong in my configurations?

Thanks in advanced

[kishore752]

I am getting the same error. Are you able to resolve this issue?