Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["@zaptime/vue3/dist/style.css"],
  runtimeConfig: {
    public: {
      zaptimeToken: "", // NUXT_PUBLIC_ZAPTIME_TOKEN
    },
  },
});

<!-- pages/book.vue -->
<template>
  <main>
    <h1>Book a call</h1>

    <ClientOnly>
      <ZaptimeCalendar :config="config" @booking-confirmed="onBooked" />
      <template #fallback>
        <div style="min-height: 360px" />
      </template>
    </ClientOnly>
  </main>
</template>

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

const runtime = useRuntimeConfig();

const config: ZaptimeConfig = {
  token: runtime.public.zaptimeToken,
  locale: { preset: "en" },
};

function onBooked(reservation: ReservationResponse) {
  navigateTo({ path: "/thank-you", query: { uuid: reservation.data.uuid } });
}
</script>

NUXT_PUBLIC_ZAPTIME_TOKEN=YOUR_TOKEN pnpm dev

A runnable project lives in the monorepo at examples/nuxt-example. More in the Nuxt guide.