将 Vue 生成的 Web 组件加载到也是 Vue 应用程序的 host/parent 时出现 Vuetify 错误

Question

我有一个使用 Vuetify 的 Vue Cli 3 生成的 Web component/custom 元素。我有一个也在使用 Vuetify 的 parent/host Vue 应用程序。当自定义元素加载到主机应用程序中时，我收到一堆类型错误，如屏幕截图所示。例如类型错误：无法读取未定义的属性主题。

这似乎是一个 Vuetify 问题。在 Vue CLi 自定义元素及其主机应用程序中使用 Vuetify 的正确架构是什么？

目前，我在父级中有 Vue.js 脚本标记，供自定义元素使用。并且像往常一样将 Vue 导入到 Vue 应用程序中。脚本标签之所以存在，只是因为自定义元素需要它。我也将 Vuetify 包含在两者中。 Web 组件正在使用 vuetify 插件。主人也是。

Web 组件本身运行良好，主机应用程序也是如此。所以，显然有冲突。

谢谢！唐尼

Answer 1

我自己解决了这个问题。简而言之，您不能使用 Vuetify 插件和 al-a-cart。只有在 Web 组件中包含完整的 Vue 和 Vuetify 时，它才有效。不是最优的，但至少它是这个 Vuetify 错误的解决方法。

import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
// import { VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider } from 'vuetify/lib';
export default {
  /* components:{
      VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider
    }  */
}

将 Vue 生成的 Web 组件加载到也是 Vue 应用程序的 host/parent 时出现 Vuetify 错误

Vuetify errors when loading a Vue-generated web component into a host/parent that is also a Vue app

web-component

vue.js

vuetify.js