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.
Top comments (0)