Vue.js Vue web组件生成中未定义UIkit

我尝试使用UIkit作为UI库构建Vue web组件。使用命令正确构建后：

npm run build --  --target wc --inline-vue --name my-element 'src/App.vue'

当我尝试在其他网站中嵌入组件时，UIkit样式会正确显示，但处理模式的UIkit实例的下拉列表是未定义的

vue.runtime.esm.js:1888 TypeError: Cannot read property 'modal' of undefined

这里是main.js文件，我在其中初始化全局UIkit变量

import App from "./App.vue"
import wrap from "@vue/web-component-wrapper"
import Vue from "vue"
import VueFlatPickr from "vue-flatpickr-component"
import uk from "uikit"
import Icons from "uikit/dist/js/uikit-icons.js"
import "flatpickr/dist/flatpickr.css"

uk.use(Icons)
Vue.config.productionTip = true
Vue.use(VueFlatPickr)
Vue.mixin({
  data: function() {
    return {
      get uk() {
        return uk
      },
    }
  },
})

const app = new Vue({
  render: (h) => h(App)
})
app.$mount("#app")

const WrapperElem = wrap(Vue, App)
window.customElements.define("my-element", WrapperElem)

下面是我如何使用它的一个小代码示例，以及故障发生的位置：

this.uk.modal("#delete-dialog").hide()

---

我在discord频道上看到了您的问题-我没有您问题的解决方案，但我已经在我的两个项目中成功地使用了UIkit 3和Vue 3，希望它能帮助您：