DEV Community

Gustavo Caetano
Gustavo Caetano

Posted on

Publish Vue components library/npm

This tutorial contains knowledge from: Link to the blog

The differences between these are corrections of possible errors and more informations about customization of the lib package.

Start Vue+Vite Template

Use npm create vite@latest on the terminal, the following message will be displayed:

Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) 
Enter fullscreen mode Exit fullscreen mode

Answer with y, the configuration of your project will start:

> npx
> create-vite

? Project name: 
Enter fullscreen mode Exit fullscreen mode

Write your Project Name, then select Vue and Typescript:

Select a framework: Vue
Select a variant: TypeScript
Enter fullscreen mode Exit fullscreen mode

If using Typescript, use the following command npm i --save-dev @types/node.

Library mode

To publish your library, let's use the library mode.
Change your vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      name: 'InsertYourLibName', // Change this lib name, ex: 'MyLib'
      // the proper extensions will be added
      fileName: 'InsertFileName' // Change your file name, ex: 'my-lib'
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

Create your components

First, create a lib folder.
This folder will contain all of your components and a file main.ts:

import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
...

export { Component1, Component2, ... }
Enter fullscreen mode Exit fullscreen mode

Import and export all the desired components.

Build component

Change the file package.json to:

{
  "name": "insert-the-lib-name", // Insert the lib name here
  "version": "1.0.0", // Remember to use the version to control
  "type": "module",
  "files": ["dist"],
  "main": "./dist/insert-the-lib-name.umd.cjs", // Insert the lib name here
  "module": "./dist/insert-the-lib-name.js", // lib name here
  "types": "./dist/main.d.ts", 
  "exports": {
    ".": {
      "import": "./dist/insert-the-lib-name.js", // lib name here
      "require": "./dist/insert-the-lib-name.umd.cjs", // lib name here
      "types": "./dist/main.d.ts"
    },
    "./style.css": "./dist/style.css" 
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build && vue-tsc --emitDeclarationOnly", 
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@types/node": "^18.7.18",
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}
Enter fullscreen mode Exit fullscreen mode

After, change the tsconfig.json (if the file doens't exist, create it):

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "outDir": "dist",
    "declaration": true
  },
  "include": ["lib/**/*.ts", "lib/**/*.d.ts", "lib/**/*.tsx", "lib/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
}
Enter fullscreen mode Exit fullscreen mode

Now, update the tsconfig.node.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    "composite": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "isolatedModules": true,
    "moduleDetection": "force",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}
Enter fullscreen mode Exit fullscreen mode

To customize your npm Readme, change your README.md file.

Run npm install again and to build the component run npm run build.

Publish

Remember to always update the version on package.json.
Check about semantic versioning here: Link to docs.

Remember to always run npm run build before publishing.

To publish, enter your npm account. If you don't have one, create it.
Run npm adduser and follow the instructions to login.

Finally, to publish your lib, run npm publish.

Go to your account on npm and check on Packages if you have successfully published your package.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more