如何在Vue3组合式API自定义组件中引入Vuetify3并隔离作用域

我希望使用Vue3的组合式API构建一个包含Vuetify3的Web组件，需要将Vuetify3添加到MyNavbar.ce.vue组件中，使其作用域限定在该组件的Shadow Root内。该组件会被动态加载到其他框架/样式构建的应用/网站中，且能正常使用Vuetify3的组件（如v-app、v-app-bar、v-btn等）。

我参考了很多在线资源，按以下步骤创建了项目，但无法在组件内正确配置Vuetify：

我的项目创建步骤 #

npm create vue@latest

> npx
> create-vue

✔ 项目名称: … my-navbar
✔ 添加TypeScript? … 否
✔ 添加JSX支持? … 否
✔ 添加Vue Router用于单页应用开发? … 否
✔ 添加Pinia用于状态管理? … 否
✔ 添加Vitest用于单元测试? … 否
✔ 添加端到端测试方案? › 否
✔ 添加ESLint用于代码质量检查? › 否

正在/path/my-navbar中生成项目...

完成。现在运行：

  cd my-navbar
  npm install
  npm run dev

Vuetify安装步骤 #

cd my-navbar
npm install @mdi/font
npm i vuetify

当前文件内容 #

src/main.js #

import { defineCustomElement } from 'vue'
import MyNavbar from './components/MyNavbar.ce.vue'

// 转换为自定义元素构造函数
const element = defineCustomElement(MyNavbar)

// 注册自定义元素
customElements.define('my-navbar', element)

index.html #

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义元素</title>
  </head>
  <body>
    <my-navbar></my-navbar>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

./src/components/MyNavbar.ce.vue #

<script setup>

</script>

<template>
  <v-app>
    <v-app-bar>
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>

      <v-app-bar-title>Application Bar</v-app-bar-title>
    </v-app-bar>
  </v-app>
</template>

<style scoped>
  @import 'vuetify/styles';
</style>

要在Vue自定义元素中集成Vuetify3并实现Shadow Root内的作用域隔离，需在组件内部初始化Vuetify并处理资源注入，具体操作如下：

1. 修改MyNavbar.ce.vue组件内部配置 #

在组件的<script setup>中导入并初始化Vuetify，同时确保图标和样式能正确注入Shadow DOM：

<script setup>
import { createVuetify } from 'vuetify'
// 导入Vuetify所有组件和指令
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// 导入Material Design图标样式
import '@mdi/font/css/materialdesignicons.css'

// 创建Vuetify实例，作用域限定在当前组件内
const vuetify = createVuetify({
  components,
  directives,
})
</script>

<template>
  <v-app>
    <v-app-bar>
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>
      <v-app-bar-title>应用导航栏</v-app-bar-title>
    </v-app-bar>
  </v-app>
</template>

<style scoped>
// 导入Vuetify基础样式，Vue会自动注入到Shadow DOM中
@import 'vuetify/styles';
</style>

2. 调整Vite构建配置（可选） #

如果遇到样式穿透或自定义元素识别问题，在vite.config.js中添加如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      customElement: true,
      template: {
        compilerOptions: {
          // 标记自定义元素，避免Vue编译报错
          isCustomElement: tag => tag.startsWith('my-')
        }
      }
    })
  ]
})

3. 验证运行 #

执行npm run dev，查看my-navbar自定义元素是否正常渲染Vuetify组件，且样式不会对外部页面造成影响。

关键说明 #

• 组件内独立初始化Vuetify：不在全局注册Vuetify，而是在自定义元素内部创建实例，确保Vuetify的所有资源和逻辑都被限定在Shadow Root内，不会污染外部应用环境。
• 样式隔离：通过Vue的scoped样式和Shadow DOM特性，Vuetify的样式只会作用于当前组件内部。
• 图标资源处理：直接在组件内导入图标CSS，确保图标能在Shadow DOM中正常加载显示。

内容的提问来源于stack exchange，提问作者Oleg