HK UI Vue

Component library for HK web apps.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

make install

Compile and Hot-Reload for Storybook Development

make dev

Release

Storybook site

Pushes to main branch triggers github action to deploy new storybook site to static.hkraft.no/hk-ui-vue

• Uses gcp service account to authenticate for file upload

Automatic package versions

• Use commit message format defined here to automatically trigger new package builds
• Authenticates to github package registry with personal access token. Token should have no expiry, but is easy to replace in repository action secrets if it stops working. Required scope is write:packages (will include repo and read:packages scopes by default). Because we want to pick up new tags created by semantic release to trigger an action to publish a new version of our package to the github package registry we can not use GITHUB_TOKEN for authentication as this will prevent us from triggering a second workflow.

Publish package

• If a new tag is created by semantic release, a new version of our ui-package can be published to @hraftno/ui-vue
• Requires authentication with github package registry with a personal access token

make publish