falseLuffy / npm-vue3

npm package template for vue3

README

Features

It is recommended to use jsx to develop components, If you want to develop with .vue

do change with pacckage.json:

"scripts": {
-  "prepublishOnly": "npm run build",
+  "prepublishOnly": "npm run build:vite",
},

• 💻 Vue suport >=3.2.0

• ✈️ Project init with vite

• 📦 Support cjs & esm

• 🛎 you can write componet with .vue or .tsx

---

• 🪖 Github Actions support (Auto CI on pull_request / Auto Release on push tag / Auto Deploy on push & pull_request)

• 🍕 Build npm package with tsup

• Build-in vitepress

  npm run docs

• 🍭 Built-in Vue3 dev environment

  playground folder

  start --> npm run dev

• 🍔 Use browserslistrc

• 🪗 Build styles with sass && postcss (postcss-nested/ autoprefixer / cssnano)

• 🌭 Stylelint that helps you avoid errors and enforce conventions in your styles.

• 🍟 Mono repo with npm

• 🎉 TypeScript, of course

• 🎄 Unit Testing with Vitest

• 🏑 Storybook for building UI components and pages

• 🧆 ESLint statically analyzes your code to quickly find problems.

• ⚒ Husky & lint-staged

• ☕ Commitlint that helps your team adhering to a commit convention

• 🛸 Deploy Storybook on Netlify ---> config

• 🥳 MIT License

how to use

replace my-custom-vue3-package with your package name

Directory structure

Project
├── __tests__           # Unit Testing
├── babel.config.js     # babel config
├── package.json
├── playground          # dev environment folder (can use source code)
│   ├── index.html
│   ├── package.json
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── vite-env.d.ts
│   └── vite.config.ts
├── postcss.config.js  # build styles with postcss
├── global.d.ts # global componet type declaration (TIPS: Manual maintenance is required)
├── src                # Package source code
│   ├── index.ts       # Package source entry
│   ├── stories        # storybook for building UI components and pages
│   ├── styles         # styles for Package
│   └── types.ts       # ts type declaration for Package
├── tsconfig.json      # ts config
└── tsup.config.ts     # build package with tsup

Register Components Globally

// main.ts
import InstallPlugin from 'my-custom-vue3-package';

app.use(InstallPlugin());

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "my-custom-vue3-package/global"
    ]
  }
}

How to add GITHUB_TOKEN

• add GITHUB_TOKEN

How to add NPM_TOKEN

0. update project setting

settings -> actions -> General

1. create npm auth token

2. then copy npm token, add to github project settings

   • project -> settings -> secrets -> actions -> create new token with name:NPM_TOKEN

How to add NETLIFY_TOKEN

1. create netlify auth token

2. then copy netlify token, add to github project settings

   • project -> settings -> secrets -> actions -> create new token with name:NETLIFY_TOKEN

3. create a site on netlify

4. copy the site_id from your netlify site settings, add it to github project settings

   • project -> settings -> secrets -> actions -> create new token with name:NETLIFY_SITE_ID

5. Stop Build from Build settings of site

How to generate VERCEL_ORG_ID / VERCEL_PROJECT_ID

1. run npx vercel in project root folder

2. open .vercel/project.json

3. copy orgId & projectId, add it to github project settings

   • project -> settings -> secrets -> actions -> create new token with name:VERCEL_ORG_ID & VERCEL_PROJECT_ID

4. create vercel token, add it to github project settings

   • project -> settings -> secrets -> actions -> create new token with name:VERCEL_TOKEN

5. change project build setting