---
title: "Reservation Calendar with first-class Vue support"
description: "Embeddable, feature-rich, TypeScript ready calendar solution designed to integrate with Vue applications. Try Zaptime today, for free!"
canonical: https://zaptime.cz/en/blog/reservation-calendar-with-vue-integration/
---

[All articles](https://zaptime.cz/en/blog/)Integrations & development

On this page

# Simple Reservation Calendar with first-class Vue support

Zaptime offers an embeddable, feature-rich, TypeScript-ready, SSR-friendly calendar solution designed to integrate with Vue and Nuxt applications. It allows developers to easily customize appearance, build custom UI layer and much more.

## [Simple Integration](#simple-integration)

This is how **easy** it is to get a default calendar up and running.

`<template>   <ZaptimeCalendar :config="config" /> </template> <script setup lang="ts"> import { ZaptimeCalendar } from "@zaptime/vue3"; import type { ZaptimeConfig } from "@zaptime/vue3"; const config: ZaptimeConfig = {   token: "<API_TOKEN>", }; </script>`

## [Layer by Layer customizations](#layer-by-layer-customizations)

By utilizing composables, developers can easily tap into the core functionalities of Zaptime, enhancing the calendar's capabilities without the hassle of extensive configurations. Control the state of the calendar, watch for state changes inside the Calendar and more.

[API documentation](https://zaptime.docs.apiary.io/#introduction/basic-principles-of-working-with-api)
[Composables documentation](https://docs.zaptime.app/guide/headless/introduction.html)

## [Make the Calendar yours](#make-the-calendar-yours)

Zaptime’s architecture supports extensive customization, from the visual aspects to the functional interactions. Use built-in Vue composables to get all data needed to build a custom calendar. And **build the UI yourself**.

Play with Zaptime [StackBlitz integration example](https://stackblitz.com/edit/zaptime-vue3?file=src%2FApp.vue).

## [Direct access to Calendar Data](#direct-access-to-calendar-data)

Blend Zaptime directly into your existing forms allowing you to manage and manipulate calendar data directly within your application workflows. This ensures that all scheduling features are tightly aligned with your user interface, enhancing your event handling processes.

`<template>   <ZaptimeCalendar :config="config" /> </template> <script setup lang="ts"> import { ZaptimeCalendar } from "@zaptime/vue3"; import type { ZaptimeConfig } from "@zaptime/vue3"; import { useCalendar, useSelectedTimeSlot } from "@zaptime/core"; // Access internal calendar state const { state } = useCalendar(); // Retrieve currently selected time slot const { selectedTimeSlot } = useSelectedTimeSlot(); const config: ZaptimeConfig = {   token: "<API_TOKEN>", }; </script>`

## [Never Double Book](#never-double-book)

Zaptime includes a feature that allows you to reserve time slots pending confirmation, providing flexibility and ensuring that time slots are never double-booked. This is particularly valuable when integrating with payment systems, as it secures the slot while awaiting transaction completion, reducing the risk of scheduling conflicts.

`<script setup lang="ts"> import { reserve, confirm } from "@zaptime/vue3"; async function submitForm() {   await reserve();   /*    Do whatever you need, reserved time slot    is pending confirmation for 15 minutes.  */   await confirm(); } </script>`

## [Easy Installation and Documentation](#easy-installation-and-documentation)

Getting started with Zaptime is as simple as installing the NPM package. The Vue component can be integrated with minimal setup and additional features can be incrementally added when needed.

Play with Zaptime [StackBlitz integration example](https://stackblitz.com/edit/zaptime-vue3?file=src%2FApp.vue).

For complete documentation check our [developer's docs](https://docs.zaptime.app/guide/vue-installation.html).

## Keep reading

[Integrations & development

### Prevent Double Bookings with Payment Providers

Avoid double bookings when using external payment providers.

](https://zaptime.cz/en/blog/how-to-prevent-double-booking-with-payment-providers/)

## Make room for better meetings.

Let your clients choose a time. Zaptime takes care of the booking.

[Get started for free](https://my.zaptime.app/register)