vue-ts-kitt
v1.10.0
Published
Vue 3 / TypeScript 5 library for UI components / modules
Maintainers
dark-kittReadme
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-kittnpm i -D vue-ts-kittAll components / modules are documented via Storybook. After installing the library, just call the following script to open the docs.
yarn vue-ts-docsnpm run vue-ts-docsOr 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 enableInstall the defined modules of the package.json file.
yarnGenerate the sdks for VS Code.
yarn dlx @yarnpkg/sdks vscodeGenerate the output.
yarn buildIf 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 .hooksAfterward, 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.
The format of your commit message must match the following rules to make it interpretable for Semantic Release.
| Commit message <types> | Value | Description |
| :--- | - | :--- |
| minor(components): + button, input and link | minor | Multiple changes for a minor update |
| feat(components): + button with icons | minor | For an edited or new feature |
| patch(components): ~ label [for] attribute type | patch | Small changes for a patch update |
| fix(components): ~ button icon.url property | patch | Bugfixes / Hotfixes / Coldfixes |
| style(components): - button bg-color | patch | For specific styles / CSS changes |
| test(components): ~ button bg-color | false | Ignored by semantic release, to create test cases |
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.