SDK Vue 3

@bailaya/vue предоставляет composables и готовые к рендерингу компоненты для Vue 3.

Установка

npm install @bailaya/vue @bailaya/core

Настройка

Установите плагин в 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

Все composables возвращают { data, loading, error, refetch } как Vue refs.

Composable	Возвращает
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>

Все параметры принимают MaybeRefOrGetter — передайте ref, геттер () => 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>

Компоненты

<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>

Слоты с областью видимости

Компоненты предоставляют свои данные через слот по умолчанию, чтобы вы могли полностью настроить макет:

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