Skip to main content

Vue 3 SDK

@bailaya/vue provides composables and ready-to-render components for Vue 3.

Installation​

npm install @bailaya/vue @bailaya/core

Setup​

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');

Composables​

All composables return { data, loading, error, refetch } as Vue refs.

ComposableReturns
useBailayaClient()BailayaClient
useStudioProfile(overrideId?)Ref<StudioProfile | null>
useInstructors(overrideId?)Ref<Instructor[] | null>
useClasses(from?, overrideId?)Ref<StudioClass[] | null>
useClassesByType(typeName, from?, overrideId?)Ref<StudioClass[] | null>
useEvents(from?, overrideId?)Ref<StudioEvent[] | null>
usePackages(overrideId?)Ref<StudioPackage[] | null>
usePrivateLessonInstructors(overrideId?)Ref<PrivateLessonInstructor[] | null>
useUserProfile(userId)Ref<UserProfile | null>

All parameters accept MaybeRefOrGetter — pass a ref, a getter () => value, or a plain value.

<script setup>
import { useClasses } from '@bailaya/vue';

const { data: classes, loading, error } = useClasses();
</script>

<template>
  <ul>
    <li v-for="cls in classes" :key="cls.id">{{ cls.name }}</li>
  </ul>
</template>

Components​

<script setup>
import {
  ClassSchedule,
  ClassScheduleByType,
  EventSchedule,
  InstructorList,
  StudioProfileCard,
  StudioDescription,
  StudioTypesList,
  StudioTypesGrid,
  UserProfileCard,
  PrivateLessonList,
  PackageList,
} from '@bailaya/vue';
</script>

<template>
  <ClassSchedule locale="en" currency="USD" />
  <PrivateLessonList
    locale="en"
    book-base-url="https://www.bailaya.com/en/book/private-lesson/"
  />
  <PackageList locale="en" />
</template>

Scoped slots​

Components expose their data via the default slot, so you can fully customize the layout:

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