[Bug]: Default installation and example from official docs doesn't work with nuxt.

[edsonfeimberg]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

When trying to implement vue-chartjs in a nuxt 2 project, following the official documentation results in the following error after running 'npm run dev':

ERROR in ./node_modules/vue-chartjs/dist/index.js friendly-errors 12:42:19 Module parse failed: Unexpected token (198:37) friendly-errors 12:42:19 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Reproduction

https://github.com/edsonfeimberg/nuxt-vuechart

chart.js version

5.2.0

vue-chartjs version

4.2.1

Possible solution

No response

[apertureless]

Related to #1002 ?

[edsonfeimberg]

Related to #1002 ?

Yes. Issue can be fixed using the suggestion from @ChurikiTenna of using babel-loader to transpile both vue-chartjs and chart.js.

In nuxt 2 this can be easily done by adding to nuxt.config:

build: {
    transpile: ['chart.js', 'vue-chartjs']
  }

Anyway, searching around we can see dozens of people struggling a lot to make vue-chartjs work with Nuxt. Literally all the resources currently available are related to older versions of vue-chartjs and leads to a lot of confusion.

Considering Nuxt relevance (specially nuxt 2) inside Vue ecosystem, i think the docs could be a bit more helpfull in this scenario. I am willing to help.

[apertureless]

Well, but the issue is basically due to older webpack version. I think nuxt 3 was released last year? And is using up2date build tools (webpack 5, vite). So I think the issue will resolve over time, when more people start using nuxt3.

[geofany]

Well, but the issue is basically due to older webpack version. I think nuxt 3 was released last year? And is using up2date build tools (webpack 5, vite). So I think the issue will resolve over time, when more people start using nuxt3.

Or maybe we can specify which version supports Nuxt 2 / Nuxt 3, with different documentation versions.

[AhmedElwerdany]

I ended up downgrading
"vue-chartjs": "^4.0.0"
"chart.js": "^3.7.0"