I'd like to use the V-Calendar library in my Vuetify app. The app had worked so far, but unfortunately I did not manage to install the V-Calendar library correctly.

No errors are displayed, but the website has stopped working. It bees pletely white and nothing is displayed. I followed V-Calendar Installation.

What I tried:

1. NPM

npm install v-calendar

2. v-calendar.js in plugins folder

• In the folder where main.js is located: New file ./plugins/v-calendar.js created

3. v-calendar.js:

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker ponents
Vue.use(VCalendar);

export default new VCalendar({
});

4. main.js:

...
import VCalendar from './plugins/v-calendar';
...
new Vue({
  router,
  store,
  vuetify,
  VCalendar,
  render: h => h(App)
}).$mount('#app')

EDIT 1:

I deleted v-calendar.js. I updated main.js (see @pretzelhammer answer).

/views/Home.vue:

<v-date-picker v-model="date" />

export default {
  name: "Home",
  data: () => ({
    date: new Date(),
  }),
};

Unfortunately no calendar is displayed. v-calender works, but v-date-picker doesn't work.

EDIT 2:

• 149 Errors:
  • Examples:
    • [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
    • [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
    • [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, String, got Date. found in ---> < VDatePicker >
    • [Vue warn]: Error in data(): "TypeError: dateString.split is not a function". found in ---> < VDatePicker >
• 1 Warning:
  • [Vuetify] Value must be a String, got Date. found in ---> < VDatePicker >

Update EDIT 2:

• I solved the the following two errors as follows:
  • [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
  • [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
• Solution:

v-for="(item, id) in items" :key="id"

instead of:

v-for="item in items" :key="item"

I'd like to use the V-Calendar library in my Vuetify app. The app had worked so far, but unfortunately I did not manage to install the V-Calendar library correctly.

No errors are displayed, but the website has stopped working. It bees pletely white and nothing is displayed. I followed V-Calendar Installation.

What I tried:

1. NPM

npm install v-calendar

2. v-calendar.js in plugins folder

• In the folder where main.js is located: New file ./plugins/v-calendar.js created

3. v-calendar.js:

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker ponents
Vue.use(VCalendar);

export default new VCalendar({
});

4. main.js:

...
import VCalendar from './plugins/v-calendar';
...
new Vue({
  router,
  store,
  vuetify,
  VCalendar,
  render: h => h(App)
}).$mount('#app')

EDIT 1:

I deleted v-calendar.js. I updated main.js (see @pretzelhammer answer).

/views/Home.vue:

<v-date-picker v-model="date" />

export default {
  name: "Home",
  data: () => ({
    date: new Date(),
  }),
};

Unfortunately no calendar is displayed. v-calender works, but v-date-picker doesn't work.

EDIT 2:

• 149 Errors:
  • Examples:
    • [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
    • [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
    • [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, String, got Date. found in ---> < VDatePicker >
    • [Vue warn]: Error in data(): "TypeError: dateString.split is not a function". found in ---> < VDatePicker >
• 1 Warning:
  • [Vuetify] Value must be a String, got Date. found in ---> < VDatePicker >

Update EDIT 2:

• I solved the the following two errors as follows:
  • [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
  • [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.
• Solution:

v-for="(item, id) in items" :key="id"

instead of:

v-for="item in items" :key="item"

• javascript
• vue.js
• npm
• vuejs2
• vuetify.js

• i dont think you need to export a VCalendar instance in the plugin file and you don't need to include VCalendar in the Vue constructor as well, – Ali Hassan Commented Dec 13, 2020 at 15:59
• thanks @AliHassan, I updated the code but it still doesn't work. – KplnMoon Commented Dec 13, 2020 at 16:46
• Are you getting any JS errors in the console tab of DevTools? Also, are you using the latest version of the v-calendar library? – pretzelhammer Commented Dec 13, 2020 at 16:49
• Yes, v-calendar is up to date (v2.1.1) and unfortunately I have a lot of errors and a warning. (see question) – KplnMoon Commented Dec 13, 2020 at 17:09
• @pretzelhammer I fixed all the "String" errors with new Date().toISOString(). Now I only have the following errors when I use v-date-picker: (1) [Vue warn]: Error in render: "RangeError: Invalid time value" and (2) RangeError: Invalid time value – KplnMoon Commented Dec 13, 2020 at 18:40

1 Answer 1

You didn't follow the instructions correctly. All you need to do is:

1. NPM

npm install v-calendar

2. main.js

import Vue from 'vue';
import VCalendar from 'v-calendar';

// Use v-calendar & v-date-picker ponents
Vue.use(VCalendar, {
  ponentPrefix: 'vc',
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

And then you'll be able to use the vc-calendar and vc-date-picker ponents in any of your Vue templates.