@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