You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@samk-dev/nuxt-vcalendar

Package Overview
Dependencies
Maintainers
0
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@samk-dev/nuxt-vcalendar

Integrates V Calendar in Nuxt


Version published
Maintainers
0
Created

Changelog

Source

v1.0.4

compare changes

🏡 Chore

  • Indicate compatibility with new v4 major (015e741)
  • Deps update (ca257c4)
  • Deps update (b88c4c5)
  • Resolve conflict (b3cfe9e)
  • Readded package-lock.json (2baf4f2)

❤️ Contributors

Readme

Source

Nuxt VCalendar

npm version npm downloads License Nuxt

Integrates V Calendar in Nuxt

VCalendar Docs

Features

  • 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
npx nuxi@latest module add @samk-dev/nuxt-vcalendar

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

Manual Installation

  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']
})

Stackblitz example

https://stackblitz.com/edit/nuxt-starter-2zwgab?file=app.vue

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 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

Alt

Keywords

FAQs

Package last updated on 13 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc