Vivu NPM

Starter template to build component library for vue.js 2-3

Features

• Faster by default: vite, vue, pnpm, esbuild
• Typescript, of course
• Testing: vitest
• Git custom hooks: husky
• Commit conventions: commitizen
• Linters: commitlint, eslint, @antfu/eslint-config
• CI/CD: github actions

Requirement

• node.js
• volta
• pnpm
• encrypted secrets

Getting Started

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

# clone repository
$ git clone https://github.com/logustra/vivu-npm.git

# open folder vivu-npm
$ cd vivu-npm

# install packages
$ pnpm install

# build and serve with vite dev server
$ pnpm dev

Checklist

When you use this template, try follow the checklist to update your info properly

• [ ] Change name, description, repository, bugs field in package.json
• [ ] Change the author name in LICENSE
• [ ] Change the lib name in vite.config.ts
• [ ] Change the favicon in public
• [ ] Remove the .github folder which contains the funding info
• [ ] Clean up the README(s) and remove modules

And, enjoy :)

Publish to NPM

Make sure you have added the GIT_TOKEN and NPM_TOKEN encrypted secrets

# tag git history
$ git tag v0.0.1 -m 'v0.0.1'

# push tag to git
$ git push origin --tags

Usage

Setup

Vue 3

import { createApp } from 'vue'
import HelloWorld from '@logustra/vivu-npm'
import App from './app.vue'

const app = createApp(App)
app.use(HelloWorld)

Vue 2

import Vue from 'vue'
import CompositionAPI from '@vue/composition-api'
import HelloWorld from '@logustra/vivu-npm'

Vue.use(CompositionAPI)
Vue.use(HelloWorld)

Basic Usage

<template>
  <hello-world />
</template>

Demo →

Cheers me on

Love my works? give me 🌟 or cheers me on here 😆 Your support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true. Much appreciated! ❤️ 🙏

    🐙 Github     🌍 Ko-Fi     🇮🇩 Trakteer

License

MIT License © 2022 Faizal Andyka