如何在 Vue 3 创建的 Web 组件中添加像 Vuetify 这样的库？

Question

我正在寻找添加一些库，如 Vuetify 或在 Vue3 创建的 Web 组件中使用其他 Javascript 库。 我也检查了有关此问题的所有答案，但没有找到任何有用的解决方案。

我希望我的自定义 Web 组件能够识别 Vuetify 组件和样式。

Answer 1

这可以使用

defineCustomElement

覆盖来完成，在这个答案中解释：

const component = {
  template: `
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
    <v-app>
      ...
    </v-app>
  `
}
const vuetify = createVuetify({})
const customVuetifyElement = defineCustomElement(component, {plugins: [vuetify]})
customElements.define('custom-vuetify-element', customVuetifyElement)

我必须在自定义组件和外部页面中包含 Vuetify CSS。图标字体必须包含在外部页面中。不知道为什么。

这是在游乐场。