Version 4.3.0 and up cause issues with import CSS & i18n

[lucswart]

As mentioned in the docs, you can import the locale and css by doing the following:

import "vue-cal/dist/i18n/nl.js";
import "vue-cal/dist/vuecal.css";

This is tested on 4.2.0 and works accordingly, but when upgrading to 4.3.0 it can't find the desired file anymore.

V4.2.0

V4.3.0

[Twoody]

This is related to your config probable. It's a stupid bug. Let me search for the fix...

[Twoody]

   // Mandatory pre-built plugin package
   optimizeDeps: {
      include: [
         'vue-cal/dist/vuecal.common.js',
      ],
   },

[Twoody]

That's vite.config.js

[lucswart]

Thanks for your fast response. I uninstalled the node modules and installed them again, but it didn't work...

[Twoody]

Oh shoot, I think my answer is unrelated, sorry. I am on 4.2.0 and this does seem to be a different issue.

Can you provide an MVP of the issue so we can see the exact config for this, please? (vite, webpack, w/e...)

[lucswart]

I made a codesandbox to reproduce the issue: Check it here

[riderx]

Got the same issue when upgrading from 4.2.0 to 4.3.1 Downgrade to 4.2.0 fix the issue. I'm using vite v3

[mike347]

I just ran into the issue myself.. it seems like vuecal.css is now vue-cal.css.

Change import "vue-cal/dist/vuecal.css"; to import "vue-cal/dist/vue-cal.css"; Hope that helps!

[antoniandre]

Sorry folks, I forgot to mention that, then realised it was an issue while working on a new release in another branch yesterday. I will be releasing the new build this week. 😎 In the new build I’ve put back vuecal.css so there will be less confusion going forward. but for now temporarily point to vue-cal.css :)

[antoniandre]

@lucswart, version 4.3.0 onward is in progress, it’s neither the latest tag nor the next tag on npm. I’ll merge the esm branch into the master this week and have a fresh new build. the documentation will be updated explaining all the correct setups.

[antoniandre]

The new version 4.3.4 is now ready and released. It's only for Vue 3, and has an ESM build which is automatically used with bundlers like Webpack, Vue CLI, Vite. The advantage is a smaller build, with tree shaking and auto imported modules for drag & drop and i18n. The css import is now done via import 'vue-cal/dist/vuecal.css' like before.

Demo with drag & drop and FR locale: https://stackblitz.com/edit/vuecal-vite-esm?file=src%2FApp.vue

Please reopen if not solved. :)

[antoniandre]

Also now the Vue 3 build is by default when you npm i vue-cal. For vue 2 it's npm i vue-cal@legacy (following Vue model).

The documentation is updated and should state all you need. If something is missing or incorrect feel free to let me know.