Vue Quasar Components

A lightweight and modern component library built with Vue 3 and Quasar Framework.
This library currently includes two beautifully designed UI components — MyButton and MyCard — created for clean, elegant, and production-ready interfaces.

✨ Features

• 🌟 Modern Gradient Button
• 🧊 Glassmorphism Card
• 🎨 Clean & Minimal UI
• ⚡ Vue 3 + Quasar Power
• 📦 Fully Tree-shakeable
• 🔧 Easy to Install & Use
• 🧩 Perfect for Dashboards & Business UI

🚀 Installation

Install using NPM:

npm install vue-quasar-components

Since this package depends on Vue & Quasar, make sure they are installed:

npm install vue quasar

🔧 Usage

Add it to your Vue app:

import { createApp } from "vue";
import App from "./App.vue";

// Quasar
import { Quasar } from "quasar";
import "quasar/dist/quasar.css";

// Library
import VueQuasarComponents from "vue-quasar-components";

const app = createApp(App);

app.use(Quasar);
app.use(VueQuasarComponents);

app.mount("#app");

📦 Components

1 MyButton

A premium gradient button with hover animation.

<template>
 <q-btn
   :label="label"
   color="primary"
   unelevated
   class="my-btn"
   no-caps
   :loading="loading"
 />
</template>

<script setup lang="ts">
defineProps<{
 label: string
 loading?: boolean
}>()
</script>

2) MyCard

A glass-style modern card with smooth shadows.

<template>
 <q-card class="my-card">
   <div class="card-content">
     <slot />
   </div>
 </q-card>
</template>

🛠 Development Setup

Install dependencies:

npm install

Build the component library:

npm run build

Output will be generated inside:

dist/

📤 Publishing to NPM

Update version before publishing:

npm version patch

Publish:

npm publish --access public

Make sure you are logged in:

npm login

📁 Project Structure

vue-quasar-components/
│
├─ src/
│  ├─ components/
│  ├─ index.ts
│
├─ dist/
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
├─ README.md

📄 License

MIT License