itc-common-component-package

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

📦 Installation

npm install itc-common-component-package

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

🚀 Quick Start

Prerequisites

Ensure you have Vue 3 and Quasar installed:

npm install vue@^3.0.0 quasar@^2.0.0 @quasar/extras

Setup Quasar in Your Project

In your main.js or main.ts:

import { createApp } from 'vue'
import { Quasar } from 'quasar'

// Import Quasar styles
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/dist/quasar.css'

import App from './App.vue'

const app = createApp(App)

app.use(Quasar, {
  plugins: {}
})

app.mount('#app')

💡 Usage

As a Plugin (Global Registration)

import { createApp } from 'vue'
import { Quasar } from 'quasar'
import ItcComponents from 'itc-common-component-package'

import 'quasar/dist/quasar.css'

const app = createApp(App)

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

app.mount('#app')

Individual Component Import (Recommended)

Most users will use this by importing directly into the page/component where it's needed:

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

<script setup>
import { MyButton, MyCard } from 'itc-common-component-package'
</script>

📖 Examples

Basic Button Usage

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

<script setup>
import { MyButton } from 'itc-common-component-package'
</script>

Basic Card Usage

<template>
  <MyCard>
    <p>Card body content</p>
  </MyCard>
</template>

<script setup>
import { MyCard } from 'itc-common-component-package'
</script>

Combined Usage

<template>
  <MyCard>
    <h3>Card Title</h3>
    <p>Some description text</p>
    <MyButton label="Action Button" />
  </MyCard>
</template>

<script setup>
import { MyCard, MyButton } from 'itc-common-component-package'
</script>

📋 API Reference

MyButton

A button component built on top of Quasar's q-btn component with primary color styling.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | label | string | ✅ Yes | - | The button label text |

Example

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

<script setup>
import { MyButton } from 'itc-common-component-package'
</script>

MyCard

A flexible card component with default padding and styling, built on top of Quasar's q-card component.

Props

This component does not accept any props. Use slots to customize content.

Slots

| Slot | Description | |------|-------------| | default | Main card content |

Example

<template>
  <!-- Basic usage -->
  <MyCard>
    <p>Card body content</p>
  </MyCard>

  <!-- With multiple elements -->
  <MyCard>
    <h3>Title</h3>
    <p>Description</p>
    <MyButton label="Action" />
  </MyCard>

  <!-- With custom styling -->
  <MyCard>
    <div class="custom-content">
      <p>Custom styled content</p>
    </div>
  </MyCard>
</template>

<script setup>
import { MyCard, MyButton } from 'itc-common-component-package'
</script>

🔧 Development

Setup

# Install dependencies
npm install

# Build the library
npm run build

Project Structure

itc-common-component-package/
├── 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

📝 TypeScript Support

Full TypeScript support is included. Type definitions are automatically available when you import the component.

import { MyButton, MyCard } from 'itc-common-component-package'
// TypeScript will provide autocomplete for all props and events

📦 Publishing

1. Update version in package.json
2. Build the package: npm run build
3. Login to npm: npm login
4. Publish: npm publish --access public

Published package will be accessible via https://www.npmjs.com/package/itc-common-component-package.

📄 License

ISC

👤 Author

Created by Roja