Nuxt VCalendar
V Calendar を Nuxt に統合
機能
- ゼロ設定
- VCalendar コンポーネントにプレフィックスを付ける
- すべての VCalendar コンポーネント、または必要なものだけを自動インポート
クイックセットアップ
- プロジェクトに
@samk-dev/nuxt-vcalendarの依存関係を追加します
npx nuxi@latest module add @samk-dev/nuxt-vcalendar
これで完了です！Nuxt アプリで Nuxt VCalendar を使用できるようになりました ✨
手動インストール
- プロジェクトに @samk-dev/nuxt-vcalendar の依存関係を追加します
# 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
nuxt.config.tsのmodulesセクションに@samk-dev/nuxt-vcalendarを追加します
export default defineNuxtConfig({
modules: ['@samk-dev/nuxt-vcalendar']
})
Stackblitz の例
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
