Database Sync

Nuxt Calendar includes built-in support for database synchronization via NuxtHub. This allows you to store events in a PostgreSQL database with minimal setup.

Pro Feature: Database synchronization requires a NuxtCalendar Pro license.

License Key

Database synchronization is a Pro feature. Ensure you have a valid licenseKey in your configuration.

Enable Database Sync

In your nuxt.config.ts, set enableDatabaseSync to true:

export default defineNuxtConfig({
  NuxtCalendar: {
    enableDatabaseSync: true
  }
})

Configure NuxtHub

Ensure you have NuxtHub configured in your project. Nuxt Calendar will automatically use the database provided by NuxtHub.

Using the Composable

The useCalendarDatabase composable provides all the methods you need to manage events.

<script setup lang="ts">
const { fetchEvents, createEvent, updateEvent, deleteEvent } = useCalendarDatabase()

// Load events on mount
const { events } = await fetchEvents()

// Handle event changes from the calendar
async function onEventChange(event) {
  await updateEvent(event.id, event)
}
</script>

<template>
  <NuxtCalendar 
    :events="events" 
    @event-change="onEventChange" 
  />
</template>

API Endpoints

When database sync is enabled, the module automatically registers the following server routes:

• GET /api/nuxt-calendar/events: Fetch all events.
• POST /api/nuxt-calendar/events: Create a new event.
• PUT /api/nuxt-calendar/events/:id: Update an existing event.
• DELETE /api/nuxt-calendar/events/:id: Delete an event.

Customizing the Schema

By default, Nuxt Calendar uses a standard schema for events. If you need to add custom fields, you can extend the database table in your own migrations.

Make sure to run npx nuxi hub database migrations make after enabling database sync to generate the necessary tables.