Integrates V Calendar in Nuxt
- Zero config
- Prefix VCalendar components
- Auto import all VCalendar components or only what you need
- Add
@samk-dev/nuxt-vcalendardependency to your project
npx nuxi@latest module add @samk-dev/nuxt-vcalendarThat's it! You can now use Nuxt VCalendar in your Nuxt app ✨
- 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- Add
@samk-dev/nuxt-vcalendarto themodulessection ofnuxt.config.ts
export default defineNuxtConfig({
modules: ['@samk-dev/nuxt-vcalendar']
})https://stackblitz.com/edit/nuxt-starter-2zwgab?file=app.vue
<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>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
}# 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