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)

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

> npx
> create-vite

? Project name:

Write your Project Name, then select Vue and Typescript:

Select a framework: Vue
Select a variant: TypeScript

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'
        }
      }
    }
  }
})

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, ... }

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"
  }
}

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" }],
}

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"]
}

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.

Publish Vue components library/npm

Start Vue+Vite Template

Library mode

Create your components

Build component

Publish