Vue CLI Plugin for TypeScript Library Bundling

0.0.3 · abandoned · verified Wed Apr 22

This plugin offers a zero-configuration solution for bundling TypeScript libraries within Vue CLI projects. It's specifically designed to facilitate the creation of single JavaScript component files along with their corresponding TypeScript declaration files (`.d.ts`). Currently at version 0.0.3, the project appears to be abandoned, with no significant updates in several years. Its core functionality wraps `dts-bundle`, automatically configuring `webpack` to resolve conflicts that typically arise during `.d.ts` file generation with tools like `thread-loader` and `cache-loader`. This allows developers to publish Vue components as external modules, maintaining full TypeScript support without extensive build configuration, differentiating it from manual `webpack` setup or alternative bundlers.

Common errors

```
TypeScript declaration files (.d.ts) are not generated or appear empty after build.
```
cause Conflicting webpack loaders (like `thread-loader` or `cache-loader`) might be re-enabled or misconfigured, preventing `ts-loader` from writing declaration files or caching them incorrectly.

fix Ensure `vue-cli-plugin-ts-bundler` is correctly installed via `vue add ts-bundler`. Avoid manual webpack configurations that override the plugin's loader disabling. Verify `tsconfig.json` correctly specifies `declaration: true`.
```
`vue-cli-service bundle-dts` command not found or 'unknown command'.
```
cause The plugin was not successfully installed or linked, or `npx` cannot locate the executable in `node_modules/.bin`.

fix Run `vue add ts-bundler` in your project root to ensure proper installation and configuration. If already installed, try `npm install` to refresh `node_modules` or specify `npx` explicitly: `npx vue-cli-service bundle-dts`.
```
`npm run bundleDts` fails with an error indicating a missing script or execution failure.
```
cause The `bundleDts` script in `package.json` might be missing, incorrect, or the underlying `vue-cli-service bundle-dts` command is encountering an error.

fix Verify that your `package.json` contains a script like `"bundleDts": "vue-cli-service bundle-dts"`. If the script exists, try running `npx vue-cli-service bundle-dts` directly to see the raw error message from the bundler.

Warnings

breaking The plugin directly addresses and disables `thread-loader` to allow TypeScript declaration files to be written to the filesystem, as `thread-loader` otherwise prevents this operation.
Fix: No user action is required; the plugin automatically handles this conflict. Do not re-enable `thread-loader` for TypeScript compilation if using this plugin.
breaking The plugin disables `cache-loader` due to issues with incorrect caching of `__compilerOptions__` passed to `ts-loader`, which could lead to inconsistent TypeScript builds.
Fix: No user action is required; the plugin automatically handles this conflict. Avoid manual `cache-loader` configurations that might conflict.
gotcha This package is at an early version (0.0.3) and has not been updated in several years. It may not be compatible with newer versions of Vue CLI, webpack, TypeScript, or Node.js, and is considered abandoned.
Fix: For new projects, consider using more actively maintained build tools like Vite, Rollup, or alternative Vue CLI plugins for TypeScript library bundling. If encountering issues, migrating away is recommended.

Install

npm install vue-cli-plugin-ts-bundler npm
yarn add vue-cli-plugin-ts-bundler yarn
pnpm add vue-cli-plugin-ts-bundler pnpm

Imports

vue add ts-bundler
```
vue add ts-bundler
```
This command installs the plugin into an existing Vue CLI project, modifying the project's configuration and adding a `bundleDts` script.
vue-cli-service bundle-dts
wrong:
```
vue-cli-service bundle-dts
```
correct:
```
npx vue-cli-service bundle-dts [options]
```
This is the primary command-line interface for running the TypeScript declaration file bundler. It accepts options directly passed to `dts-bundle`. Using `npx` ensures the local executable is found.
npm run bundleDts
```
npm run bundleDts
```
After installing the plugin, a script named `bundleDts` is typically added to `package.json`, providing a convenient alias for `vue-cli-service bundle-dts`.

Quickstart

This quickstart guides you through creating a new Vue TypeScript library project using a preset, building it, and then bundling its TypeScript declaration files into a single `.d.ts` output.

vue create --preset vatson/vue-ts-lib my-vue-lib
cd my-vue-lib
# Develop your TypeScript library components here, e.g., src/components/MyComponent.ts
# Ensure your main entry point (e.g., src/index.ts) exports components for bundling
npm install
npm run build # Compiles your library and generates individual .d.ts files
npm run bundleDts # Bundles all .d.ts files into a single declaration file
# This will typically generate a 'dist/my-vue-lib.d.ts' or similar unified declaration file.

view raw JSON →