你如何在 web 组件中包含 vuetify [英] How do you include vuetify inside web component

问题描述

我正在使用以下命令构建 Web 组件:

I'm building a web component using the following command :

vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'

我想在这个组件中使用 Vuetify.我如何将它添加到 mycomponent.vue 以便它被限定在组件的影子根内?

I would like to use Vuetify inside of this component. How do I add it to mycomponent.vue so that it is scoped inside the component's shadow root?

此组件将动态加载到使用其他框架/样式构建的应用程序中.我希望 Web 组件能够在其中使用例如 v-btn、v-layout 等.

This component will be dynamically loaded into apps built with other frameworks/styles. I want the web component to be able to use, for example, v-btn, v-layout, etc. within it.

谢谢，唐尼

推荐答案

从 v1.3 开始，您可以导入单个组件，A La Carte...

From v1.3, you can import individual components, A La Carte...

<template>
  <!-- whatever -->
</template>

<script>
import { VBtn, VLayout } from 'vuetify/lib'

export default {
  name: 'MyElement',
  components {
    VBtn,
    VLayout
  },
  // etc
}
</script>

参见 https://vuetifyjs.com/en/framework/点菜#importing-components

这篇关于你如何在 web 组件中包含 vuetify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！