SDK Vue 3

@bailaya/vue fournit des composables et des composants prets a l'emploi pour Vue 3.

Installation

npm install @bailaya/vue @bailaya/core

Configuration

Installez le plugin dans 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

Tous les composables retournent { data, loading, error, refetch } en tant que refs Vue.

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

Tous les parametres acceptent MaybeRefOrGetter — passez un ref, un getter () => value, ou une valeur simple.

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

Composants

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

Slots avec portee

Les composants exposent leurs donnees via le slot par defaut, pour que vous puissiez entierement personnaliser la mise en page :

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