Vue installation guide

@zaptime/vue3 ships one component, ZaptimeCalendar, that owns the whole booking flow: month grid, time slots, booking form and success screen. Your app supplies a config and listens to events.

Installation

npm

$ npm install @zaptime/vue3

pnpm

$ pnpm add @zaptime/vue3

yarn

$ yarn add @zaptime/vue3

bun

$ bun add @zaptime/vue3

Peer dependency: vue ^3.0. @zaptime/core is installed transitively; add it as a direct dependency when you import composables from it.

Import the stylesheet

The JavaScript bundle does not import its CSS. Import @zaptime/vue3/dist/style.css once, globally.

Vite / main.ts

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

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

Nuxt / nuxt.config.ts

export default defineNuxtConfig({
  css: ["@zaptime/vue3/dist/style.css"],
});

WARNING

Do not use @import url("/node_modules/@zaptime/vue3/dist/style.css") inside a component <style>. It works in dev only and breaks in production builds.

The stylesheet is Tailwind with a cal- prefix and its own preflight scoped to #zaptime-calendar, so it does not clash with your app's CSS or Tailwind setup.

Basic usage

1. Import the component.
2. Create a ZaptimeConfig with your token (create an account to obtain one).
3. Render it.

<template>
  <ZaptimeCalendar :config="config" @booking-confirmed="onBooked" />
</template>

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

const config: ZaptimeConfig = {
  token: "<API_TOKEN>",
};

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

The component fetches the event type configuration from the dashboard on mount (locale texts, theme, booking rules, form fields) and merges your local config on top of it. Keep the local config minimal so that changes made in the dashboard reach your site without a deploy.

Next steps

• Component API: props, events, view state, multiple calendars.
• Nuxt: SSR and <ClientOnly>.
• Working with Time Slots: drive the booking from your own form.
• Rescheduling: let attendees move an existing booking.
• Customization and i18n.