vue-ts-kitt
v1.10.0
Published
Vue 3 / TypeScript 5 library for UI components / modules
Downloads
38
Maintainers
Readme
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.
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.