SoFunction
Updated on 2025-04-05

Detailed steps to publish vue2 custom component to npm through rollup configuration

Creating a Vue component library project First, we need to create a project of the Vue component library. We can use the Vue CLI to quickly create a basic Vue project.

vue create my-component-library

Configuring rollup Next, we need to configure rollup to build our component library. Create a file named and add the following code:

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
export default [
  {
    input: 'src/',
    output: [
      {
        file: 'dist/',
        format: 'esm',
      },
      {
        file: 'dist/',
        format: 'esm',
        plugins: [
          terser({
            output: {
              ecma: 6,
            },
          }),
        ],
      },
    ],
    plugins: [
      vue(),
      resolve({
        extensions: ['.js', '.vue'],
      }),
      commonjs(),
      babel({
        exclude: 'node_modules/**',
        plugins: ['@babel/external-helpers'],
      }),
    ],
    external: ['vue'],
  },
];

This configuration file tells rollup how to build our component library. It uses some commonly used rollup plugins, such as vue, babel, commonjs and resolve. Where, we have Vue as an external dependency because we will use Vue in our app instead of packaging Vue in the component library. We used two output configuration items, one is an uncompressed file and the other is a compressed file. These two files will be output as ES modules so that other projects can import into our component library using the import syntax.

3. Write components in the src directory, we can create our Vue components. For example, in the src/components directory, we can create a component.

<template>
  <button class="btn" :class="type">{{ text }}</button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'primary',
    },
  },
};
</script>
<style>
.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.primary {
  background-color: #42b983;
  color: #fff;
}
.secondary {
  background-color: #fff;
  color: #42b983;
  border: 1px solid #42b983;
}
</style>

4. Export the component in src/, we can export our components.

import Button from './components/';
export { Button };

5. Build the Component Library Now we can use the npm run build command to build our component library. This will use the rollup configuration file we created in step 2 to build the component library.

5.1. Configurations that need to be installed before packaging and release

This file contains our project information and dependency information. We need to make sure the information in the file is correct so that others can install and use it correctly when using our component library.

Here is a sample file:

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "A Vue component library",
  "main": "dist/",
  "module": "dist/",
  "files": [
    "dist/*",
    "src/*"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue",
    "component",
    "library"
  ],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@vue/component-compiler-utils": "^3.1.1",
    "babel-plugin-external-helpers": "^6.22.0",
    "rollup": "^1.20.0",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^5.1.2",
    "rollup-plugin-vue": "^5.1.9"
  }
}

We need to make sure the following information is correct:

  • "name": The name of the component library
  • "version": the version number of the component library
  • "description": description information of component library
  • "main": the entry file path of the component library
  • "module": file path output in the form of ES module
  • "files": Files to include in the publishing package
  • "keywords": Some keywords used to describe component libraries
  • "author": the author information of the component library
  • "license": the license information of the component library
  • "dependencies": Dependencies required by component libraries
  • "devDependencies": After you have established the dependencies you need during development, you can run the following command to install the dependencies in the file into our project:
npm install

Next, we can build our component library using the npm run build command and publish it to npm using the npm publish command.

npm run build

6. Publish Component Library Once we have built our Component Library, we can publish it to npm. Make sure you have registered an account on npm. Then, log in with the following command:

npm login

Then, publish the component library using the following command:

npm publish

7. Using Component Library in Other Projects Now that we have published the Component Library to npm, we can use it in other projects. First, we need to install the component library:

npm install my-component-library

We can then import our components in our Vue app:

import { Button } from 'my-component-library';
export default {
  name: 'App',
  components: {
    Button,
  },
};

Now we can use our Button component in our Vue app.

This is the article about the posting of vue2 custom components to npm through rollup configuration. For more related content of vue2 custom components to npm, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!