Vue 3 Support

Vue 3 is currently in the alpha stage via the next tag. It uses TypeScript and Rollup. It is stable but breaking changes may be mixed in at any time.

Because of breaking changes, it currently lags the Vue 2 version for new features and bug fixes but they do eventually get integrated.

At some point, when Vue 3 becomes more popular, it will become the latest version.

Install Plugin

yarn add v-calendar@next

Use Plugin

Import Styles

As of v3.0.0-alpha.7, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.

import 'v-calendar/dist/style.css';

Method 1: Use Globally

import VCalendar from 'v-calendar';

// Use plugin with defaults
app.use(VCalendar, {})

<!-- Component.vue template -->
<template>
  <v-calendar />
  <v-date-picker v-model="date" />
</template>

Method 2: Use Components Globally

// main.js
import { SetupCalendar, Calendar, DatePicker } from 'v-calendar';

// Setup plugin for defaults or `$screens` (optional)
app.use(SetupCalendar, {})
// Use the components
app.component('Calendar', Calendar)
app.component('DatePicker', DatePicker)

<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date" />
</template>

Method 3: Use Components As Needed

// main.js
import { SetupCalendar } from 'v-calendar';

// Setup plugin for defaults or `$screens` (optional)
app.use(SetupCalendar, {})

<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>

// Component.vue script
import { Calendar, DatePicker } from 'v-calendar';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}

Source setup

Please follow below mentioned steps to clone and build this project:

Clone the repo

git clone https://github.com/nathanreyes/v-calendar

# Move to directory
cd v-calendar

Install dependencies

yarn

Switch to /next branch

git checkout next

Build

# ES, CommonJS, IIFE and CSS
yarn build

Lint

yarn lint