Getting VueCompositionApi error

[Shinigami92]

Version: 0.4.10 or 0.5.0-alpha.2

[Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

found in

---> <BarChart>
       <VCard>

---

In my main.ts I definitely have a Vue.use(VueCompositionAPI); call and everything else is working.
But the charts are not rendered

Example code for a chart:

v-card(:min-height="200", height="100%")
  v-card-title URL Types
    v-card-text
      bar-chart(:chart-data="typesData", :options="typesOptions", :height="50")


typesData = { datasets: [...], labels: [...] }

typesOptions = {
  plugins: {
    legend: { display: false }
  },
  scales: {
    x: {
      beginAtZero: true
    }
  },
  indexAxis: 'y'
}

---

I'm trying to migrate from vue-chartjs to your plugin cause you support chartjs v3 (apertureless/vue-chartjs#695 (comment))

I also have created a src/plugins/chart.ts that is imported via import './plugins/chart.ts' in my main.ts

import { ArcElement, BarController, Chart, PieController, Tooltip } from 'chart.js';

Chart.register(BarController, PieController, ArcElement, Tooltip);

[Shinigami92]

I'm using vite + vue2 + vuetify as a setup

I also have an error with > 0.5.0-alpha.2 with the package nanoid, but due to it's beta I ignored it for now

[Shinigami92]

This issue looks familiar too me like vuejs/composition-api#769 🤔
Maybe you need to update some dependencies or something like that 🤷

[victorgarciaesgi]

Hi @Shinigami92 thanks for the report!
I will look into it! I don't even know if I support Vite aha

[victorgarciaesgi]

I've updated deps on 0.4.11, but it's weird I don't reproduce it on the demo

[Shinigami92]

Just guessing, but does it have anything todo with the failing CI?
https://github.com/victorgarciaesgi/vue-chart-3/runs/3190040294#step:5:18

[victorgarciaesgi]

The tests are not fail proof yet and are still in progress (I'm just learning Karma and Jasmine) but I will look into it!

[victorgarciaesgi]

@Shinigami92 Try 0.4.12, I had the bug on my nuxt demo too. It seems to be linked to a bug with vue-demi, I downgraded the version and now it works.
https://codesandbox.io/s/vue-chart-3-vue-2-mrtej?file=/package.json

[victorgarciaesgi]

Also the build passed now :p

[Shinigami92]

Will report you back tomorrow or over weekend. Not @home currently 🙂

[noook]

Got the same error here since a few days, gonna try pinning versions of vue-demi or vue-chart-3 to lower versions

[victorgarciaesgi]

@noook what version are you on?

[noook]

I was on 0.1.7

I managed to solve the issue, I think the problem was related to my version of VCA.

I had to regenerate my lockfile earlier and it seems my version of VCA doesn't work when superior to 1.0.0-rc7 or else (I can't target the very specific version that causes trouble)

[Shinigami92]

Sorry for reporting so late, but sadly with v0.5.7 still the same 🙁

[victorgarciaesgi]

@Shinigami92 did you reproduce it on a codesandbox? Try reinstalling your dependencies

[noook]

I can't reproduce in a codesandbox, I have the nanoid package error when I tried reproducing

[victorgarciaesgi]

@noook Can you link me the sandbox where you have the nanoid package problem please, I though i fixed it :(

[noook]

No I think you did, I probably was debugging with older versions of your package

However, you can notice on this I have a vue-demi error: https://codesandbox.io/s/exciting-leftpad-jjw49?file=/src/App.vue

[victorgarciaesgi]

@noook This bug is related to CodeSandbox, that's why I provided a demo with nuxt instead of Vue 2.
The reason is that codesandbox has no support for postinstall script, which vue-demi need to know if the project uses Vue 2 or 3.
Nuxt sandbox provides access to the terminal because of the server-side stuff, so i would call vue-demi-switch 2