Vue-Component-Starter

A template to help you create vue3.x component

You can create yourself component quickly with it.

Feature

• ⚡️ Serve and build based on vite
• ✨ Format with pretty-quick
• 🤙🏻 Eslint support
• ⚙️ Unit Testing with Vitest
• 🦾 TypeScript, of course
• 🎈 Release package easily with bumpp
• 📦 Deploy demo with gh-pages

Try it now!

vue-component-starter require Node >=14

Github Template

Create repo from this template on Github

Clone to local

$ npx degit peterroe/vue-component-starter myComponent
$ cd myComponent
$ pnpm i

Don't forget initialize .git if you choose to clone locally:

$ git init

Development

Just run and visit http://localhost:3000

$ pnpm dev

Build

To build the Component, run:

$ pnpm build

And you will see the generated fie in dist that ready to be served.

Publish your component

Before you publish your component, you must give your component a new name in order to prevent conflicts with other people's component names.

Update package.json, and take a unique name for your npm package:

{
- "name": "vue-component-starter"
+ "name": "your-component-name"
}

You better also update the registered component name in src/index.ts:

export function install(app: App) {
- app.component('MyComponent', MyComponent)
+ app.component('yourComponentName', MyComponent)
}

Run pnpm build again to get the right files.

Make sure your are logged into npm, and run:

$ pnpm release # or `npm publish` directly without verification

For more details about publish, please check bumpp.

Deploy demo online

You can debug your components online in demo/App.vue, and they can be deployed directly.

Just run:

$ pnpm deploy:demo

Then visit https://peterroe.github.io/vue-component-starter/

Notice you have to make sure the base of demo/vite.config.ts is your github repository name:

export default defineConfig({
  // keep the same name as your github repos
  base: 'vue-component-starter',
})