Table Of Contents
How to Publish a Private Vue 3 Components Library to npm – Step-by-Step Guide
Publishing a private Vue 3 components library to npm allows you to share reusable components across different projects without making them publicly available. This guide will walk you through the step-by-step process of creating, packaging, and publishing a private Vue 3 components library to npm.
Prerequisites
Before getting started, ensure you have the following:
Node.js & npm installed
A Vue 3 project with reusable components
An npm account with an organization (for private packages)
Access to a paid npm plan (as private packages require a subscription)
Step 1: Set Up Your Vue 3 Components Library
First, create a directory for your library and initialize a new npm package
mkdir my-vue3-library && cd my-vue3-library
npm init -y
Then, install Vue 3 and configure your package:
npm install vue@next
Inside the package.json, define the entry point for your library:
“main”: “dist/index.js”,
“module”: “dist/index.esm.js”,
“types”: “dist/index.d.ts”,
Step 2: Create and Export Components
Inside your project, create a src folder and add your Vue components. Example:
<template>
<button class=”btn”>Click Me</button>
</template>
<script>
export default {
name: “MyButton”
};
</script>
<style>
.btn {
padding: 10px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
}
</style>
Create an index.js file to export your components:
import MyButton from “./src/MyButton.vue”;
export { MyButton };
Step 3: Configure Rollup for Bundling
Install Rollup and plugins:
npm install –save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-vue
Create a rollup.config.js file:
import vue from ‘@rollup/plugin-vue’;
import vue from ‘@rollup/plugin-vue’;
import resolve from ‘@rollup/plugin-node-resolve’;
import commonjs from ‘@rollup/plugin-commonjs’;
export default {
input: ‘index.js’,
output: [
{
file: ‘dist/index.js’,
format: ‘cjs’,
},
{
file: ‘dist/index.esm.js’,
format: ‘esm’,
}
],
plugins: [vue(), resolve(), commonjs()]
};
Run the build command:
npx rollup -c
Step 4: Set Up Your npm Organization for Private Packages
If you haven’t already, create an npm organization:
Go to npm organizations
Create a new organization (requires a paid plan)
Enable private packages
Update your
package.jsonname to include your org name:npm set registry https://registry.npmjs.org/
npm set //registry.npmjs.org/:_authToken=YOUR_AUTH_TOKENPublish your package:
npm publish –access restricted
Step 6: Install and Use Your Private Package
In another Vue 3 project, install your private package:
npm install @my-org/my-vue3-library
Import and use the component:
<template>
<MyButton />
</template>
<script>
import { MyButton } from “@my-org/my-vue3-library”;
export default {
components: {
MyButton
}
};
</script>