How to Publish a Private Vue 3 Components Library to npm Packages?

Creating a private Vue 3 components library and publishing it to npm can significantly streamline your development process. By packaging your reusable Vue components into a library, you ensure consistency across projects, improve maintainability, and facilitate collaboration. 

With the help of Vue 3 and tools like Vite and npm, developers can streamline the creation and distribution of component libraries. This comprehensive guide will walk you through creating and publishing a private Vue 3 components library to npm packages.

We’ll use Vite for project scaffolding, TypeScript for type safety, and npm for package management. By the end of this tutorial, you’ll know how to encapsulate your Vue components into a reusable library and share them across projects.

Step-by-Step Guide to Publish a Private Vue 3 Components Library to npm Packages

Step 1: Create a Vue 3 Project Using Vite

1. First, create a Vue 3 project using Vite with the following command:

npm create vite@latest

1. Select Vue and TypeScript when prompted for the framework. After the project is created, run:

npm install

1. Install the necessary package for building your application:

npm install rollup-plugin-typescript2

1. Run the server:

npm run dev

This will spin up the server at http://localhost:5173/.

Step 2: Create a Simple Component

Create a simple component to publish as part of your component library package. Paste this code in src/components/MyButton.vue:

<template>

    <button class="my-button">My Awesome Button</button>

  </template>

  <script lang="ts">

  import { defineComponent } from 'vue'

  export default defineComponent({

    name: 'my-button',

  })

  </script>

  <style>

  .my-button {

    border: 2px solid red;

    border-radius: 2px;

  }

  </style>

Step 3: Set Up an Entry Point for Your Library

Create an entry file src/MyPlugin.ts:

  import MyButton from './components/MyButton.vue'

  export default {

    install: (app: App) => {

      app.component('b-upload-files-modal', MyButton)

    },

  }

  export { MyButton }

This file imports MyButton.vue and creates a plugin for the components, making them available globally when the plugin is used. This is achieved by default exporting a plugin in the install property and registering all our components. Our library can then be imported in any vue project inside the main.ts file like this.

  import { createApp } from 'vue'

  import './style.css'

  import App from './App.vue.'

  import MyLibrary from 'my-library'

  app.use(MyLibrary)

  createApp(App).mount('#app')

Using app. use, we will make our components global and, therefore, will not need to import them individually anywhere inside our Vue project. We can also go against using this approach and import only what we need by doing the following:

Import { MyButton } from ‘my-library’

(Note: This was only possible because, in our src/MyPlugin.ts file, we are exporting our components individually. Otherwise, we cannot import our components individually.)

Step 4: Configure Vite

Update vite.config.ts:

 import { defineConfig } from 'vite'

  import vue from '@vitejs/plugin-vue'

  import typescript2 from 'rollup-plugin-typescript2'

  export default defineConfig({

    plugins: [

      Vue(),

      typescript2({

        check: false,

        include: [

          'src/components/*.vue,'

          'src/components/**/*.vue,'

          'src/*.ts',

          'src/**/*.ts',

        ],

        tsconfigOverride: {

          compilerOptions: {

            outDir: 'dist',

            sourceMap: true,

            declaration: true,

            declarationMap: true,

          },

        },

        exclude: ['vite.config.ts,' 'main.ts'],

      }),

    ],

    build: {

      cssCodeSplit: false,

      lib: {

        entry: './src/MyPlugin.ts',

        formats: ['es,' 'js'],

        name: 'ViewerPlugin',

        fileName: (format) => `plugin.${format}.js`,

      },

      rollupOptions: {

        external: ['vue'],

        output: {

          exports: 'named',

          globals: {

            Vue: 'Vue',

          },

        },

      },

    },

  })

Step 5: Build Your Library

Run the build command:

npm run build

This will create a dist folder containing the build files.

Step 6: Prepare for npm Publishing

Update package.json to include the necessary fields for npm publishing:

 {

    "name": "my_components_library",

    "description": "Library for components that are re-used across all bundle repositories,"

    "private": false,

    "version": "0.0.1",

    "author": {

      "name": "Irtiza Hussain,"

      "email": "[email protected]"

    },

    "repository": {

      "type": "git",

      "URL": "<link_to_your_github_repository"

    },

    "main": "./dist/lumber.cjs.js,"

    "module": "./dist/lumber.es.js,"

    "files": [

      "dist/"

    ],

    "exports": {

      ".": {

        "import": "./dist/plugin.cjs.js,"

        "require": "./dist/plugin.es.js."

      },

      "./style.css": "./dist/style.css"

    },

    "browser": {

      ".": "./dist/plugin.es.js"

    },

    "types": "./dist/MyPlugin.d.ts,"

    "scripts": {

      "dev": "vite",

      "build": "vue-tsc && vite build,"

      "preview": "vite preview"

    },

    "dependencies": {

      "rollup-plugin-typescript2": "^0.36.0",

      "vue": "^3.3.11"

    },

    "peerDependenciesMeta": {

      "vue": {

        "optional": true

      }

    },

    "devDependencies": {

      "@vitejs/plugin-vue": "^4.5.2",

      "typescript": "^5.2.2",

      "vite": "^5.0.8",

      "vue-tsc": "^1.8.25"

    }

  }

Step 7: Publish to npm

First, log in to your npm account: npm login Then publish your package: npm publish Ensure your package name in package.json is unique to avoid errors.

Step 8: Use Your Library in a Vue Project

Install your library:

npm install my_components_library

Import and use it in your Vue project:

import { createApp } from 'vue'

import MyPlugin from 'my_awesome_components_library'

 import 'my_awesome_components_library/styles.css'

 app.use(MyPlugin)

 createApp(app).mount('#app')

Or import components individually:

import { MyButton } from ‘my_components_library

Conclusion

Understanding the process of publishing a private Vue 3 components library to npm packages is a significant milestone for any Vue.js developer.

Integrating tools like Vite, TypeScript, and npm can encapsulate Vue components into reusable modules, enhancing code organization and promoting reusability across projects. 

We hope this guide has equipped you with the knowledge to efficiently create, build, and publish Vue component libraries. 

Irtiza Hussain

Senior Software Engineer