Vue 3 Appsbd UI Library

A premium, reusable Vue 3 component library built for high-performance enterprise applications. Leverages Vite, SCSS, and Bootstrap 5 to provide a rich set of UI components with built-in Dark Mode and RTL support. version 1.0.8

🚀 Key Features

• Vue 3 Composition API: Optimized for performance and flexibility.
• Dynamic Theming: Full dark mode support using Bootstrap's data-bs-theme.
• RTL Ready: Built with CSS logical properties for global accessibility.
• Plugin System: custom-built global systems for Toasts and Alerts.
• Enterprise Ready: Includes complex components like MultiSelect, DatePicker, Wizard, Pricing Tables, and Filter Panels.
• Themable Skins: 10 prebuilt color skins (default, green, red, cyan, purple, violet, pink, orange, gray, black) shipped as standalone CSS under dist/skins/.

📦 Installation

npm install @appsbd/vue3-appsbd-ui

Peer Dependencies

Ensure you have the following installed in your project:

npm install bootstrap bootstrap-icons vee-validate @vee-validate/rules vue-router vue3-gettext @lucide/vue tiny-emitter @appsbd/vue3-elite-grid

🤖 AI Assistant Integration

Installing this library automatically copies AI skills into your project so Claude Code and Agent-based tools can generate correct component code without guessing props or imports.

What gets installed

Running npm install @appsbd/vue3-appsbd-ui copies the following automatically:

Available slash commands

Example:

/generate-module

Module: Invoice
Fields:
- title (text, required)
- amount (number, required, min: 0)
- status (select: Draft | Sent | Paid, required)
- due_date (date)

API: /api/invoices
Output: src/modules/invoices/

Optional: enable additional AI tools

To also install skills for Cursor or Windsurf, pass APPSBD_AGENTS during install:

APPSBD_AGENTS=cursor npm install @appsbd/vue3-appsbd-ui
APPSBD_AGENTS=cursor,windsurf npm install @appsbd/vue3-appsbd-ui

Or run the setup script any time after install:

node node_modules/@appsbd/vue3-appsbd-ui/scripts/setup.js --cursor --windsurf

Manual reference

If you prefer not to use auto-installed skills, the reference files are included in the package:

• node_modules/@appsbd/vue3-appsbd-ui/AI_REF.md — compact component index (~500 tokens, start here)
• node_modules/@appsbd/vue3-appsbd-ui/AI_REFERENCE.md — full table with descriptions
• node_modules/@appsbd/vue3-appsbd-ui/.ai/ai_ref_[Name].md — per-component props/events/slots

Point your AI to read AI_REF.md first, then the specific .ai/ file for the component you need.

🛠️ Setup

Register the library and its styles in your main entry file (e.g., main.js):

import { createApp } from "vue";
import AppsbdUI from "@appsbd/vue3-appsbd-ui";
import "@appsbd/vue3-appsbd-ui/style.css";

const app = createApp(App);
app.use(AppsbdUI);
app.mount("#app");

Applying a Theme Skin (optional)

// Default skin
import "@appsbd/vue3-appsbd-ui/dist/skins/default.css";

// Or any other prebuilt skin
import "@appsbd/vue3-appsbd-ui/dist/skins/purple.css";

🧩 Core Components & Composables

Toast Notifications

The library includes a robust custom toast system with pause-on-hover and pause-on-focus-loss features.

import { useToast } from "@appsbd/vue3-appsbd-ui";
const { toast } = useToast();

toast.success("Changes saved!", { timeout: 3000 });
toast.error("An error occurred", { position: "top-center" });

Global Alerts

Integrated SweetAlert2 system focused on aesthetic consistency.

import { useAlert } from "@appsbd/vue3-appsbd-ui";
const { alert } = useAlert();

alert.success("Success!", "Your profile has been updated.");

Theme Management

Easily toggle between light and dark modes.

import { useTheme } from "@appsbd/vue3-appsbd-ui";
const { isDark, toggleTheme } = useTheme();

📚 Component Reference

📄 License

MIT