A reusable Vue 3 component library built and maintained by AppsBD, designed to simplify UI development with clean, modular, and customizable components.

📦 Installation

npm install @appsbd/vue3-appsbd-libs
# or
yarn add @appsbd/vue3-appsbd-libs

🔧 Usage

Register the plugin globally in your Vue app:

// main.js or main.ts
import { createApp } from 'vue';
import App from './App.vue';
import AppsbdLibs from '@appsbd/vue3-appsbd-libs';

const app = createApp(App);
app.use(AppsbdLibs);
app.mount('#app');

Or import only what you need:

import { Modal, ApbdDatePicker } from '@appsbd/vue3-appsbd-libs';

🧩 Available Components

| Component Name | Description | | -------------------- |---------------------------------------------------------| | AndOrDivider | A logical divider between conditions (AND/OR). | | ApbdAccordion | Accordion container for collapsible content. | | ApbdAccordionItem | Individual item within an accordion. | | ApbdCheckBox | Custom styled checkbox input. | | ApbdConfirmPopover | Confirmation popover for critical actions. | | ApbdDatePicker | Date selector with custom styling. | | ApbdDropdown | Dropdown selector component. | | ApbdFilterPanel | Managing data filters in tables, lists, or grids. | | ApbdRadioButton | Styled radio button input. | | ApbdSwitchButton | Toggle switch component. | | AppLoader | Central loading spinner/indicator. | | AppSkinColorPicker | Allows users to select a skin/theme color. | | CustomFields | Dynamic custom form fields (useful for settings forms). | | DateSVG | SVG icon/component related to date UI. | | FileUploader | File upload UI with preview/support. | | ImageRadioInput | Radio-style image selection input. | | ImageSelector | Select, preview, upload images. | | InputField | Flexible input for text, password, URL. | | Modal | Reusable modal/dialog box. | | QuestionSVG | SVG icon/component for help or tooltips. | | ResponseMsg | Shows success/error/info messages in a unified style. | | SettingsForm | Structured form for settings/configurations. |

📘 Example

<template>
  <div>
    <InputField v-model="name" label="Your Name" />
    <ApbdDatePicker v-model="date" />
    <ApbdSwitchButton v-model="isActive" label="Active?" />
    <Modal v-if="showModal" @close="showModal = false">
      <p>Modal content goes here...</p>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  InputField,
  ApbdDatePicker,
  ApbdSwitchButton,
  Modal
} from '@appsbd/vue3-appsbd-libs';

const name = ref('');
const date = ref(null);
const isActive = ref(false);
const showModal = ref(true);
</script>

✅ Requirements

• Vue 3.x
• Vite or Vue CLI compatible
• Bootstrap 5+

🔮 Roadmap

• [x] Stable base UI components
• [ ] Add documentation site with live examples
• [ ] Add accessibility support (a11y)
• [ ] Add testing coverage (unit + visual)

📬 Contact

For support, custom components, or commercial usage: Email: [email protected] Website: https://appsbd.com