Vue.js 3.2.9 Incompatible

[x9nico]

Hello,

When I'm trying to install vue3-datepicker (0.3.4) with a project contains the version 3.2.9 from VueJS. But, it looks like that the lib is incompatible.

Is it possible to make an update to fix it please ?

In case, there is the logs:

+-- UNMET PEER DEPENDENCY vue@^3.0.0
+-- vue-sidebar-menu@5.2.4
`-- vue3-datepicker@0.3.4
  `-- date-fns@2.22.1 deduped

npm ERR! peer dep missing: vue@^3.0.0, required by vue3-datepicker@0.3.4

There is all my dependencies :

"devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^7.0.0",
        "sass": "^1.45.0",
        "sass-loader": "^8.0.2",
        "worker-loader": "^3.0.8"
    },
    "dependencies": {
        "axios": "^0.19.2",
        "chart.js": "3.3.2",
        "comlink": "^4.3.1",
        "core-js": "^3.6.5",
        "mitt": "^3.0.0",
        "moment": "^2.29.4",
        "pinia": "^2.0.24",
        "pinia-plugin-persistedstate": "^3.1.0",
        "primeflex": "3.3.0",
        "primeicons": "5.0.0",
        "primevue": "3.23.0",
        "prismjs": "1.9.0",
        "save": "^2.9.0",
        "vis-timeline": "^7.7.0",
        "vue": "3.2.9",
        "vue-router": "^4.0.0-0",
        "vue-sidebar-menu": "^5.2.4",
        "vue-visjs-timeline": "^1.1.0",
        "vue3-datepicker": "^0.3.4",
        "xlsx": "^0.18.5",
        "date-fns": "^2.22.1"
    }

Thanks.

[icehaunter]

Hey, I'm not sure what causes your issue. A fresh vite project with both your version of vue and the latest one works. Can you try updating to the latest version?

[x9nico]

Hey, I'm not sure what causes your issue. A fresh vite project with both your version of vue and the latest one works. Can you try updating to the latest version?

Ok, I tested on a fresh vue project, and the interface is now like that : It's not possible on version 0.3.8 to still have this interface ? =>

[jhob101]

I also got the same issue - it seems to have lost the stylesheet. I've rolled back to 0.3.4 for now and the problem has gone away.

[ebrake]

Same issue, stylesheets missing

[icehaunter]

My bad, probably how I changed the packaging broke the "autoincluded" stylesheets. I'll take a look over the weekend to figure out how to fix it, but meanwhile the css file is there in the dist folder, so you should be able to import 'vue3-datepicker/dist/vue3-datepicker.css'.

[icehaunter]

So, as an update:

1. Old rollup way of building the component doesn't work with non-end-of-life Node versions and uses deprecated libraries & archived repositories (mainly this: https://github.com/vuejs/rollup-plugin-vue)
2. Current recommended way to bundle a library is to use Vite, which I now do
3. Vite doesn't support injecting inline styles out of the box: https://github.com/vitejs/vite/issues/1579
4. So now I'm using a plugin to inject the CSS but it then doesn't spit out the CSS file. I'll push this version as 0.4.0 without the non-injected CSS and figure out the rest if people complain

[icehaunter]

Fresh vue project install-and-go works now, so I'm closing this for now

[hdk-pd]

I'm using the newest version and there is no styles if I don't manually inject them by adding import 'vue3-datepicker/dist/vue3-datepicker.css';. My Laravel application is using Vue, Vite (newest major version 5, might this be the issue?), the Laravel Vite plugin and the Vite Vue plugin. It used to work so it did break at some point.

This is how I use the library in my single file component:

<template>
[...]
      <DatePicker id="offer-expires-at"
                  :locale="locale"
                  input-format="yyyy-MM-dd"
                  starting-view="day"
                  :lower-limit="new Date()"
                  :upper-limit="latestExpirationDate"
                  v-model="expiresAt"
                  class="w-full mt-2 bg-white shadow border border-gray-300 px-3 py-2 rounded-md text-xs" />
[...]
</template>

<script>
    [...]
    import DatePicker from 'vue3-datepicker';
    import 'vue3-datepicker/dist/vue3-datepicker.css'; // The temporary workaround
    [...]

    export default {
        components: {
            [...]
            DatePicker,
        },
    }
</script>

Is there anything else I could provide to assist further debugging? Thank you for your work!