@quidgest/ui
v0.14.5
Published
Quidgest's UI framework
Downloads
443
Readme
@quidgest/ui
Quidgest's UI framework.
Features
- A collection of customizable and reusable Vue 3 components.
- Written in TypeScript for type safety and better developer experience.
- Easily style components using SCSS.
- Documentation and examples.
Install
npm i @quidgest/ui
Usage
Start by installing the framework. We recommend placing this logic in a dedicated file, such as src/plugins/quidgest-ui.ts
.
// src/plugins/quidgest-ui.ts
import { createFramework } from '@quidgest/ui'
const framework = createFramework()
export default framework
Then, use the plugin in main.ts
, as follows:
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import framework from './plugins/quidgest-ui'
createApp(App).use(framework).mount('#app')
Once installed, components can be used like so:
<template>
<q-button @click="handleClick">Click me</q-button>
</template>
<script setup lang="ts">
import { QButton } from '@quidgest/ui'
function handleClick() {
console.log("Parallel lines have so much in common. It's a shame they'll never meet.")
}
</script>
Development
The package utilizes Storybook for component development and organization. You can view the components locally in the Storybook documentation explorer.
Execute the following command to run Storybook:
npm run storybook
(You might need to execute pnpm install
beforehand if you haven't done so.)
By default, Storybook will be running at http://localhost:6006/
.
Running Unit Tests
It's important to run unit tests during development to ensure code quality and correctness. Execute the following command to run the unit tests:
npm run test