@bailaya/vue

A Vue 3 component library and composables for the BailaYa public API

Overview

@bailaya/vue builds on top of @bailaya/core to provide:

• A createBailaya plugin + useBailayaClient composable
• Vue 3 composables for fetching all core data (with loading, error, data, and refetch)
• Components with sensible defaults (and full styling slots + scoped slots)
• Full TypeScript support, including localized text & date formatting

Works with or without Tailwind. If you don't use Tailwind, just override the class props (or use the default slot) to apply your own styling.

Features

• Plugin + client (createBailaya + useBailayaClient)

• Composables (all return { data, loading, error, refetch })

  • useStudioProfile(overrideId?)
  • useUserProfile(userId)
  • useInstructors(overrideId?)
  • useClasses(from?, overrideId?)
  • useClassesByType(typeName, from?, overrideId?)
  • useEvents(from?, overrideId?)
  • usePackages(overrideId?)
  • usePrivateLessonInstructors(overrideId?)

• Components (all props overridable)

  • <ClassSchedule />
  • <ClassScheduleByType />
  • <EventSchedule />
  • <InstructorList />
  • <StudioProfileCard />
  • <StudioDescription />
  • <StudioTypesList />
  • <StudioTypesGrid />
  • <UserProfileCard />
  • <PrivateLessonList />
  • <PackageList />

Installation

npm install @bailaya/vue

or with Yarn:

yarn add @bailaya/vue

Peer Dependencies

• "vue": ">=3.3.0"

Quick Start

Install the plugin in main.ts:

import { createApp } from 'vue';
import { createBailaya } from '@bailaya/vue';
import App from './App.vue';

const app = createApp(App);
app.use(createBailaya({ studioId: 'YOUR_STUDIO_ID' }));
app.mount('#app');

Using a Composable

<script setup lang="ts">
import { useInstructors } from '@bailaya/vue';

const { data: instructors, loading, error, refetch } = useInstructors();
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <template v-else>
    <button @click="refetch">Refresh</button>
    <ul>
      <li v-for="i in instructors" :key="i.id">{{ i.name }} {{ i.lastname }}</li>
    </ul>
  </template>
</template>

Using a Component

<script setup lang="ts">
import { StudioProfileCard } from '@bailaya/vue';
</script>

<template>
  <StudioProfileCard locale="en" />
</template>

Scoped Slots

Components expose their data via the default slot for full layout control:

<ClassSchedule>
  <template #default="{ cls }">
    <div class="my-card">{{ cls.name }} — {{ cls.startTime }}</div>
  </template>
</ClassSchedule>

API Reference

createBailaya(options)

Vue plugin that installs the BailaYa client into the app.

• options.baseUrl?: string – override default API URL
• options.studioId?: string – default studio ID

Composables

All parameters accept MaybeRefOrGetter — pass a ref, a getter () => value, or a plain value. The composable re-fetches automatically when reactive inputs change.

All composables return:

{
  data: Ref<T | null>;
  error: Ref<Error | null>;
  loading: Ref<boolean>;
  refetch: () => Promise<void>;
}

| Composable | Description | |--------------------------------------------------------|--------------------------------------------------------| | useBailayaClient() | Returns the raw BailayaClient instance | | useStudioProfile(overrideId?) | Fetch a studio's profile | | useUserProfile(userId) | Fetch a user's profile / bio | | useInstructors(overrideId?) | Fetch list of active instructors | | useClasses(from?, overrideId?) | Fetch next 7 days of classes (all types) | | useClassesByType(typeName, from?, overrideId?) | Fetch next 7 days of classes filtered by typeName | | useEvents(from?, overrideId?) | Fetch next 7 days of events | | usePackages(overrideId?) | Fetch active group-class packages | | usePrivateLessonInstructors(overrideId?) | Fetch instructors accepting private lesson bookings |

Components

All components share:

• Override props for every styling slot (CSS class names)
• locale (where relevant) for date and text localization
• labels object for custom text
• Default slot for full layout override

| Component | Key Props | |----------------------------|------------------------------------------------------------------------------------------------| | <StudioProfileCard /> | overrideId?, locale?, labels? | | <StudioDescription /> | overrideId?, locale? | | <InstructorList /> | overrideId?, locale? | | <UserProfileCard /> | userId, locale?, labels? | | <ClassSchedule /> | from?, overrideId?, locale?, currency?, bookBaseUrl?, hideBookButton?, labels? | | <ClassScheduleByType /> | typeName, from?, overrideId?, locale?, currency?, bookBaseUrl?, hideBookButton? | | <EventSchedule /> | from?, overrideId?, locale?, currency?, bookBaseUrl?, hideBookButton?, labels? | | <StudioTypesList /> | overrideId?, locale?, hrefPrefix? | | <StudioTypesGrid /> | overrideId?, locale?, showDescription? | | <PrivateLessonList /> | overrideId?, locale?, bookBaseUrl?, labels? | | <PackageList /> | overrideId?, locale?, buyBaseUrl?, labels? |

License

ISC