0Pricing
Vue Academy · Lesson

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 — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.js

Keeping 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.

Frequently asked questions

Is the “Vite Library Mode Configuration” lesson free?

Yes — the full text of “Vite Library Mode Configuration” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Vite Library Mode Configuration
  2. TypeScript Declarations for Component Libraries
  3. Tree-Shaking and Auto-Import
  4. Publishing to npm and Semantic Versioning
← Back to Vue Academy