Nuxt VCalendar

Integrates V Calendar in Nuxt

Features

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

Quick Setup

Add @samk-dev/nuxt-vcalendar dependency to your project

# Using pnpmpnpm add -D @samk-dev/nuxt-vcalendar# Using yarnyarn add --dev @samk-dev/nuxt-vcalendar# Using npmnpm install --save-dev @samk-dev/nuxt-vcalendar

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()    }  ])</script><template>  <div>    <client-only>      <h2>Calendar</h2>      <VCalendar v-model="date" />      <h2>Date Picker</h2>      <VDatePicker v-model="date" :attributes="attrs" />    </client-only>  </div></template>

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 https://vcalendar.io/calendar/api.html#defaults   */  calendarOptions?: Defaults  /**   * @description auto import v-calendar components   * @default {DatePicker, true, Calendar: true}   */  autoImports: VCalendarComponents}

Development

# Install dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release

Alt