Intermediate LevelVue JS
How do you structure and bundle a shared Vue 3 UI component library using Vite and TypeScript?
❓ Interview Prompt: Explain building shared Vue UI libraries, Vite library mode (build.lib), externalizing Vue as a peerDependency, and generating .d.ts files.
When building an enterprise UI component library shared across multiple projects:
Vite Library Mode Configuration:
1
Set 'build.lib' in 'vite.config.ts' specifying entry points and formats ('es', 'cjs').
2
Externalize Vue: Add 'vue' to 'build.rollupOptions.external' so consumers supply their own single Vue instance.
3
Type Declarations: Use 'vite-plugin-dts' to automatically generate '.d.ts' TypeScript declaration files.
Code Implementation Example
typescript
// vite.config.ts — Shared UI Library Build Config
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts';
export default defineConfig({
plugins: [vue(), dts({ insertFinalNewline: true })],
build: {
lib: {
entry: 'src/index.ts',
name: 'SharedUiLib',
fileName: (format) => `shared-ui.${format}.js`
},
rollupOptions: {
external: ['vue'], // Do NOT bundle Vue into library!
output: { globals: { vue: 'Vue' } }
}
}
});💡Configuring Vite library mode to bundle a shared Vue UI library.
🎯 Interview Key Takeaway
Use Vite library mode (build.lib) and externalize Vue to bundle shared TypeScript component libraries.
#Vite#Library Mode#Component Library#Intermediate
Back to all Vue JS Questions→