BaklaVue

Appearance

Composables ​

BaklaVue provides Vue 3 composables to enhance your application functionality.

Available Composables ​

UI & Feedback ​

  • Notification (useNotification) - Programmatically manage notifications
  • Confirm Dialog (useConfirmDialog) - Confirm/cancel dialog flow
  • Disclosure (useDisclosure) - Open/close state for Dialog, Drawer, Dropdown
  • Stepper (useStepper) - Multi-step wizard state for BvStepper
  • Scroll Visibility (useScrollVisibility) - Scroll-based visibility for scroll-to-top and sticky UI
  • Scroll Lock (useScrollLock) - Lock body scroll when modals/drawers are open
  • Alert (useAlert) - Programmatic show/hide for inline BvAlert
  • Loading (useLoading) - Generic loading state with optional delay
  • Focus Trap (useFocusTrap) - Trap focus within modals/dialogs
  • Id (useId) - Stable unique IDs for accessibility attributes

Forms ​

  • Form Validation (useZodForm) - Form validation with Zod schemas
  • Form State (useFormState) - Form dirty and touched state without validation
  • Field Array (useFieldArray) - Dynamic array fields for forms
  • Form Persistence (useFormPersistence) - Auto-save form data to localStorage/sessionStorage
  • Stepper Form (useStepperForm) - Multi-step form validation with useStepper
  • Scroll to Error (useScrollToError) - Scroll to element with validation error

Data & Utilities ​

  • File (useFile) - Parse, create, and download CSV, TSV, and JSON files
  • Clipboard (useClipboard) - Copy text to clipboard
  • Storage (useLocalStorage / useSessionStorage) - Reactive sync with localStorage and sessionStorage
  • Cookie (useCookie) - Reactive sync with document.cookie
  • Share (useShare) - Share text, URLs, or files via Web Share API
  • Base64 (useBase64) - Convert Blob/File/ArrayBuffer/canvas to Base64
  • Previous (usePrevious) - Track previous value of a ref
  • Toggle (useToggle) - Simple boolean toggle
  • DateFormat (useDateFormat) - Reactive locale-aware date formatting
  • NumberFormat (useNumberFormat) - Reactive locale-aware number/currency formatting
  • Slug (useSlug) - Convert string to URL-friendly slug
  • Async State (useAsyncState) - Generic async state (loading, error, data)

Performance ​

  • Debounce (useDebounceFn / useDebouncedRef) - Debounce function or ref value
  • Throttle (useThrottleFn / useThrottledRef) - Throttle function or ref value
  • Timer (useIntervalFn / useTimeoutFn) - Pausable interval and cancellable timeout
  • Request Animation Frame (useRafFn) - Animation frame loop

Browser APIs ​

  • Breakpoints (useBreakpoints) - Responsive breakpoints (isMobile, isTablet, isDesktop)
  • Window Size (useWindowSize) - Reactive viewport width and height
  • Intersection Observer (useIntersectionObserver) - Detect element visibility in viewport
  • Element Size (useElementSize) - Reactive element dimensions via ResizeObserver
  • Container Scroll (useContainerScroll) - Scroll position inside a scrollable div
  • Sticky (useSticky) - Detect when sticky element is stuck

Data Fetching ​

  • Fetch (useFetch) - Reactive fetch with loading/error/data
  • Query (useQuery) - Data fetching with caching, retries, and invalidation
  • Mutation (useMutation) - Mutations (POST/PUT/DELETE) with cache invalidation
  • Infinite Query (useInfiniteQuery) - Infinite scroll / cursor-based pagination
  • Lazy Query (useLazyQuery) - On-demand queries that fetch when execute() is called
  • Polling (usePolling) - Polling with fetch state (non-cached)

Theme & Layout ​

  • Theme (useBaklavaTheme) - Overwrite Baklava colors (Vue preset or custom)
  • Color Scheme (useColorScheme) - Light/dark/system with persistence
  • Theme Preset (useThemePreset) - Persist Baklava theme preset
  • Pagination (usePagination) - Pagination state for tables and lists

Usage Pattern ​

Composables follow Vue 3 Composition API patterns:

vue
<script setup>
import { useNotification } from "@baklavue/composables";

const { success, error, warning, info } = useNotification();

// Use the composable methods
success({
  caption: "Success!",
  description: "Operation completed",
});
</script>

Importing Composables ​

typescript
import { useNotification } from "@baklavue/composables";

TypeScript Support ​

All composables are fully typed:

typescript
import type { ApplyThemeOptions } from "@baklavue/composables";

Next Steps ​