Vue basic

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "@zaptime/vue3/dist/style.css";

createApp(App).mount("#app");

<!-- App.vue -->
<template>
  <ZaptimeCalendar :config="config" @booking-confirmed="onBooked" @calendar-loaded="loaded = true" />
  <p v-if="!loaded">Loading calendar…</p>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ZaptimeCalendar } from "@zaptime/vue3";
import type { ZaptimeConfig } from "@zaptime/vue3";
import type { ReservationResponse } from "@zaptime/core";

const loaded = ref(false);

const config: ZaptimeConfig = {
  token: import.meta.env.VITE_ZAPTIME_TOKEN,
  locale: { preset: "de", startDayOfWeek: "mon" },
  theme: {
    mode: "light",
    borderRadius: "8px",
    colors: {
      accentLight: "#818cf8",
      accentBase: "#6366f1",
      accentDark: "#4f46e5",
    },
  },
  hideLocation: false,
};

function onBooked(reservation: ReservationResponse) {
  console.log("Booked", reservation.data.uuid, "for", reservation.data.userEmail);
}
</script>

Everything in config besides token is optional and can instead be set in the dashboard. See the config reference.