Vue-cal not working

[JoppeDC]

Using the most simple component I can come up with, vue-cal does not work. I'm not sure if this is a config issue on my end, or there's something wrong

• vue@3.2.39
• vue-cal@4.3.0, vue-cal@4.7.0, vue-cal@4.8.0 (Tried all these)

<template>
  <vue-cal></vue-cal>
</template>

<script setup>
  import VueCal from 'vue-cal'
  import 'vue-cal/dist/vuecal.css'
</script>

Gives me the following error, and renders nothing.

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at Proxy.<anonymous> (vue-cal.es.js:185:1280)

[Twoody]

If there is some merit to this, then the issue should be reproducible in a codepen. If that is the case, we would be happy to look into it.

[JoppeDC]

@Twoody You're right. I tried a codepen and it worked. Must be something on my end, but i'm not sure what. Other vue components work fine, but this simple one just keeps giving me the error. Any idea where i can look maybe?

[antoniandre]

Hi @JoppeDC, If you try on Codepen, there's a high chance you are not using the same Vue Cal build. You should rather compare your project with the demo on StackBlitz for Vue Cal + Vue 3 + Composition API + Vite here: https://stackblitz.com/edit/vuecal-vite-composition-api?file=package.json,src%2FApp.vue.

You can also find this example listed on the documentation.

This example is using the latest Vue Cal with the ES build like you. I also just tried it in a fresh Vite app and confirm there is no error. If it is still not working for you, I would try to update the node modules. Delete the package lock file, delete the node_modules directory and run the npm i again. Also try in an isolated project to see if it helps.

Please share a reproduction example if still not solved.

[JoppeDC]

@antoniandre After hours and hours of struggling, I finally found the issue. Thanks for all your information, I'm just leaving this here in case someone has the same issue.

I'm using Webpack (Together with the Symfony Webpack Encore component).

In my config, I specifically disabled the options API using the feature flags, to force the use of Composition API.

__VUE_OPTIONS_API__: false,

Removing this flag, the calendar seems to be working correctly and just fine. This probably makes sense, considering the bundle uses options API, but its weird i haven't had this issue with other bundles.

Either way, I can start settin up the calendar now! 🎉

[JoseGoncalves]

I was trying to integrate vue-cal in a Quasar with Vite project, were the Vue Options API was also disabled and only managed to worakaround the error that appeared after reading this issue raised by @JoppeDC.

If this library requires the Vue Options API to work, it would be better to add some comment in the documentation indicating this in the Composition API usage.