Vue-ts-kitt NPM

Vue 3 / TypeScript 5 library for UI components / modules

Another Vue 3 component / module library that includes TypeScript 5 and is bundled by Vite.

⚠️ Library is still in progress and not finalised

Install

yarn add -D vue-ts-kitt

npm i -D vue-ts-kitt

All components / modules are documented via Storybook. After installing the library, just call the following script to open the docs.

yarn vue-ts-docs

npm run vue-ts-docs

Or add it to your scripts section in your package.json file.

{
  "scripts": {
    "docs": "vue-ts-docs"
  }
}

Usage

<template>
  <div>
    my project + vue-ts-kitt
    <Button :html-attributes="{ name: 'my-button' }" :text="'test'" />
  </div>
</template>

<script setup lang="ts">
import { Button } from 'vue-ts-kitt';
</script>

<style lang="scss">
@import 'vue-ts-kitt/style.css';
</style>

Working in the library.

This project uses Yarn 4 as package manager. So, don't use npm to install the modules. \ (Troubleshoot: Please take a look on "Starting with Yarn")

Start by enabling Corepack, if it isn't already. This will add the yarn binary to your PATH.

corepack enable

Install the defined modules of the package.json file.

yarn

Generate the sdks for VS Code.

yarn dlx @yarnpkg/sdks vscode

Generate the output.

yarn build

If you need an example to create a component, take a look at the button component.

Git Hooks

It is necessary to set the custom hook directory after each clone. To do so, you need to call the following command.

git config core.hooksPath .hooks

Afterward, the commit-msg hook inside the .hooks directory will lint your commit messages.

Semantic Release

It is used to automate the package release workflow by your commit messages.

<type>(<scope>): (<symbol>) <short summary>

(<body>)
detailed information about your changes
(</body>)

Note: The usage of <scope>, <symbol> and <body> is optional.

Note: It is not necessary to define a scope. You can write each commit message type also without a scope (fix: ~ button icon property).

Commit message `<scopes>`	Value	Description
`fix(no-release): - button bg-color`	false	Ignored by semantic release, to create test cases
`feat(breaking): + button icon.image property`	major	Use this scope for a breacking change

Note: It is not required to write specific scopes. The values major, minor and patch defines the version as followed: v1.1.1 === v(major).(minor).(patch)

`<symbols>`	Description
+	added
-	removed
~	edited

Note: It is optional, to use this helper symbols to shorten your commit message.

Push major releases

It is only possible to push a major release with the following options. Use the scope breaking and/or describe your breaking change underneath the following subheads BREAKING CHANGE: or BREAKING CHANGES: in the <body> of your commit message. Combine this with each minor or patch update.

Note: It is recommended to include [skip ci] in the commit message if you won't trigger a new release.

vue vue3 vite library component typescript

express portfinder vue

1 year ago

1 year ago

1 year ago

1 year ago