README

rollup-preset-vue

A small opinionated preset for rollup to bundle your vue libraries with rollup.

Features out of the box:

Automatic TypeScript
Minimal - two lines config
No lock-in - you are in total control of the rollup config
Best practices for publishing vue libraries by compiling for esm, cjs, jsx, umd and tsc
Automatically clean dist fodler on build

Usage

Install with your favorite package manager:

npm install -D rollup-preset-vue rollup
pnpm add -D rollup-preset-vue rollup
yarn add -D rollup-preset-vue rollup

Import withConfig in your rollup.config.js. The first and only argument is (optionally) your rollup config:

// rollup.config.js
import withVue from "rollup-preset-vue";

export default withVue();

Configure your package.json

{
  "name": "my-lib",

  "// This is optional but this remove the need to manually configure the source input for rollup": "",
  "source": "src/my-lib.tsx",

  "// All the following properties will be hinted during build": "",
  "// You will just have to copy paste them": "",

  "main": "dist/cjs/my-lib.js",
  "module": "dist/esm/my-lib.js",
  "types": "dist/types/my-lib.d.ts",
  "files": ["dist"],
  "exports": {
    ".": {
      "vue": "./dist/source/my-lib.jsx",
      "import": "./dist/esm/my-lib.js",
      "browser": "./dist/esm/my-lib.js",
      "require": "./dist/cjs/my-lib.js",
      "node": "./dist/cjs/my-lib.js"
    }
  }
}

API

withVue(options?: Options | Options[]): RollupOptions | RollupOptions[]

The default export. A wrapper function that accepts all of the rollup options and a few extra to configure what to generate.

Options

The options are the exact same as Rollup with a few extra that are specific to the wrapper

Interface

interface Options extends RollupOptions {
  /**
   * Defines which target you want
   * @default ['esm']
   */
  targets?: ModuleFormat[];
  /**
   * Whether to generate a package.json or not
   * This is useful for sub packages
   * @default false
   */
  writePackageJson?: boolean;
  /**
   * Whether to hint what to put in your package.json or not
   * @default false
   */
  printInstructions?: boolean;
}

Example

// rollup.config.js
import withVue from "rollup-preset-vue";

export default withVue([
  { input: "browser.ts", targets: ["esm"] },
  { input: "server.ts", targets: ["esm", "cjs"], writePackageJson: true },
]);

Usage no npm install needed!