VCalendar module for Nuxt

Nuxt VCalendar

npm versionnpm downloadsLicenseNuxt

Integrates V Calendar in Nuxt

VCalendar Docs


  • Zero config
  • Prefix VCalendar components
  • Auto import all VCalendar components or only what you need

Quick Setup

  1. Add @samk-dev/nuxt-vcalendar dependency to your project
# Using pnpm
pnpm add -D @samk-dev/nuxt-vcalendar

# Using yarn
yarn add --dev @samk-dev/nuxt-vcalendar

# Using npm
npm install --save-dev @samk-dev/nuxt-vcalendar
  1. Add @samk-dev/nuxt-vcalendar to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@samk-dev/nuxt-vcalendar']

That's it! You can now use Nuxt VCalendar in your Nuxt app ✨

Usage Example

<script setup lang="ts">
  import { ref } from '#imports'
  const date = ref(new Date())

  const attrs = ref([
      key: 'today',
      highlight: {
        color: 'green',
        fillMode: 'solid'
      dates: new Date()

      <VCalendar v-model="date" />
      <h2>Date Picker</h2>
      <VDatePicker v-model="date" :attributes="attrs" />

Module Options

export type VCalendarComponents = {
  DatePicker: boolean
  Calendar: boolean
export interface ModuleOptions {
   * @description prefix instead of v-
   * @default V
  prefix: string
   * @description load v-calendar styles
   * @default true
  defaultCss: boolean
   * @description load custom stylesheet
   * @default undefined
  cssPath?: string
   * @description v-calendar options
   * @see
  calendarOptions?: Defaults
   * @description auto import v-calendar components
   * @default {DatePicker, true, Calendar: true}
  autoImports: VCalendarComponents


# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release