Publish Vue components library/npm

Gustavo Caetano - Aug 22 - - Dev Community

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.

. . . .
Terabox Video Player