Как использовать глобальные компоненты из сторонней библиотеки в моей библиотеке 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 />
)