Как использовать глобальные компоненты из сторонней библиотеки в моей библиотеке vue 3

У меня есть библиотека на vue 3, которая собирается с помощью vite. В index.ts файле я экспортирую компоненты наружу:

import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

export { HelloWorld, TheWelcome }

Подключаю стороннюю библиотеку так в файле main.ts:

import { ComponentLibrary } from '@frontend-ui/vue-ui/dist/plugin'

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).use(ComponentLibrary).mount('#app')

И использую в компонентах vue (<my-component /> как раз здесь из сторонней библиотеки '@frontend-ui/vue-ui'):

<template>
<my-component first="Test 1" last="Test 2"></my-component>
</template>

И сам файл vite.config.ts:

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    }),
    vueJsx()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'auth-service',
      fileName: 'auth-service'
    },
    rollupOptions: {
      external: ['vue', '@frontend-ui/vue-ui/dist/components'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

В режиме разработки dev всё работает, но при сборке компоненты из сторонней библиотеки не собираются и остаются просто html тэгом (в случае с <my-component /> в итоговой сборке он также остаётся просто <my-component />)


Ответы (0 шт):