vue-quasar-components-mizan

A collection of reusable Vue 3 components built with Quasar Framework.

Installation

npm install vue-quasar-components-mizan

Peer Dependencies

This package requires the following peer dependencies:

• vue: ^3.0.0
• quasar: ^2.0.0

Make sure these are installed in your project:

npm install vue quasar

Usage

As a Plugin (Global Registration)

import { createApp } from 'vue'
import { Quasar } from 'quasar'
import VueQuasarComponents from 'vue-quasar-components-mizan'

import 'quasar/dist/quasar.css'

const app = createApp(App)

app.use(Quasar, { /* quasar options */ })
app.use(VueQuasarComponents)

app.mount('#app')

Individual Component Import

<template>
  <div>
    <MyButton label="Click Me" />
    <MyCard title="Card Title" subtitle="Card Subtitle">
      <p>Card content goes here</p>
    </MyCard>
  </div>
</template>

<script setup>
import { MyButton, MyCard } from 'vue-quasar-components-mizan'
</script>

Components

MyButton

A button component built on top of Quasar's q-btn component.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | The button label text (required) |

Example

<template>
  <MyButton label="Submit" />
</template>

<script setup>
import { MyButton } from 'vue-quasar-components-mizan'
</script>

MyCard

A flexible card component with header, body, and footer sections.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | '' | Card title text | | subtitle | string | '' | Card subtitle text | | elevated | boolean | true | Enable shadow elevation | | bordered | boolean | true | Show border | | padding | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' | Padding size |

Slots

• default - Main card content
• header - Custom header content (overrides title/subtitle)
• footer - Footer content

Example

<template>
  <!-- Basic usage -->
  <MyCard title="Card Title" subtitle="Card Subtitle">
    <p>Card body content</p>
  </MyCard>

  <!-- With custom header -->
  <MyCard>
    <template #header>
      <h2>Custom Header</h2>
    </template>
    <p>Card body</p>
    <template #footer>
      <button>Action</button>
    </template>
  </MyCard>

  <!-- Custom padding and styling -->
  <MyCard 
    title="Compact Card" 
    :elevated="false" 
    :bordered="true"
    padding="sm"
  >
    <p>Content with small padding</p>
  </MyCard>
</template>

<script setup>
import { MyCard } from 'vue-quasar-components-mizan'
</script>

Development

Setup

# Install dependencies
npm install

# Build the library
npm run build

Project Structure

vue-quasar-components-mizan/
├── src/
│   ├── components/
│   │   ├── MyButton.vue
│   │   └── MyCard.vue
│   └── index.ts          # Main export file
├── dist/                 # Build output
├── package.json
├── tsconfig.json
└── vite.config.ts

Build

The package is built using Vite and generates:

• UMD bundle: dist/vue-quasar-components.umd.js
• ES module: dist/vue-quasar-components.es.js
• TypeScript declarations: dist/index.d.ts and component .d.ts files
• CSS: dist/vue-quasar-components-mizan.css

TypeScript Support

This package includes TypeScript declarations. No additional @types package is required.

License

ISC

Author

Created by Mizanur Rahman