Vite Library Mode Configuration
build.lib in vite.config.ts, entry point, formats (es/cjs/umd), external dependencies.
Vite Library Mode Configuration is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
Library Mode
Vite's library mode builds a package meant to be imported by other apps rather than run as a website. You configure it under build.lib in vite.config.ts.
The entry Point
The entry file is the public surface of your library - it re-exports every component and utility consumers should access.
// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";Configuring build.lib
Point build.lib.entry at that file and give the library a global name (used for the UMD build).
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib"
}
}
});The formats Array
formats chooses output module formats. For modern libraries, ["es", "cjs"] covers ESM bundlers and Node/CommonJS consumers.
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib",
formats: ["es", "cjs"]
}The fileName Function
fileName can be a function receiving the format, letting you produce distinct names per output.
lib: {
// ...
fileName: (format) => "my-ui-lib." + format + ".js"
}Why Externalize Vue
You must not bundle Vue into your library - the consumer already has it. Bundling it duplicates Vue and breaks reactivity. Mark it external.
rollupOptions.external
Under build.rollupOptions, list vue in external so it stays an import in the output instead of being inlined.
build: {
lib: { /* ... */ },
rollupOptions: {
external: ["vue"]
}
}output.globals for UMD
If you also emit a UMD build, the browser needs to know the global variable name for each external. Map vue to the global Vue.
rollupOptions: {
external: ["vue"],
output: {
globals: { vue: "Vue" }
}
}Externalizing Peer Dependencies
Any peer dependency (icon sets, utility libs the consumer already installs) should also be externalized, not bundled.
external: ["vue", "vue-router", "@vueuse/core"]Building
Run the build to emit the configured formats into dist. The same plugin pipeline (vue, vueJsx) still applies to source files.
npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.jsKeeping CSS Separate
Component styles can be emitted as a separate CSS file consumers import, keeping the JS bundle lean and letting them control style inclusion.
// consumer side
import "my-ui-lib/dist/style.css";Quick Check
Why list vue in rollupOptions.external when building a Vue library?
Recap
Vite library mode is configured under build.lib with an entry barrel file, a name, a formats array (es and cjs), and a fileName function. Externalize vue (and peers) via rollupOptions.external, and map UMD globals with output.globals so the consumer supplies Vue.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “Vite Library Mode Configuration” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “Vite Library Mode Configuration”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
What will I learn in “Vite Library Mode Configuration”?
build.lib in vite.config.ts, entry point, formats (es/cjs/umd), external dependencies. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “Vite Library Mode Configuration” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Vite Library Mode Configuration
- TypeScript Declarations for Component Libraries
- Tree-Shaking and Auto-Import
- Publishing to npm and Semantic Versioning