Vue 3 SDK

@bailaya/vue უზრუნველყოფს composable-ებს და მზა კომპონენტებს 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');

Composable-ები

ყველა composable აბრუნებს { data, loading, error, refetch } Vue ref-ების სახით.

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, getter () => 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>

ინსტალაცია​

კონფიგურაცია​

Composable-ები​

კომპონენტები​

სკოპიანი სლოტები​

ინსტალაცია

კონფიგურაცია

Composable-ები

კომპონენტები

სკოპიანი სლოტები