Could not find a declaration file for vue-chartjs

[lee-alderdice]

Expected Behavior

Having run npm i vue-chartjs and installed the peer chart.js import { Line } from 'vue-chartjs'; should enable the use of a line chart in a component.

Actual Behavior

Error Message: Could not find a declaration file for vue-chartjs.

Environment

• vue.js version: 2.5.16
• vue-chart.js version: @latest
• npm version: 6.1.10

Package.json depdendencies

"dependencies": { "@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/vue-fontawesome": "0.0.23", "bootstrap-vue": "^2.0.0-rc.11", "chart.js": "^2.7.2", "vue": "^2.5.16", "vue-chartjs": "^3.3.2", "vue-class-component": "^6.0.0", "vue-property-decorator": "^6.0.0", "vue-router": "^3.0.1", "vuex": "^3.0.1" },

[lee-alderdice]

I have read about creating a .d.ts file within my project but the package is so well used and constructed I can't believe that would be needed.

[apertureless]

Are you using typescript?

[lee-alderdice]

Yes. Hmm, have I missed something in the docs? Will check again.

[apertureless]

Well I have no experience with typescript.
However I will check if I can provide some better support for TS.

Would be great if you could post a small reproduction repo, so I can check it out :)

[lee-alderdice]

Sure. Empty vue-cli project with Typescript et al. having run npm install and creating a simple Line.vue component importing Line from vue-chartjs.

https://github.com/lee-alderdice/vuechartjs.ts

[apertureless]

Hey @lee-alderdice

I've worked on a PR to add type definitions. However I never really used typescript and also not that experienced in writing *.d.ts for it.

Could you check it out and maybe test it in your project?

I created a new vue create project with TS support.
And used yarn link to link the PR into the project.

It seems to be working now. But verification would be great before merging.

<script lang="ts">
import Component, { mixins } from 'vue-class-component';
import { Bar } from 'vue-chartjs';

@Component
export default class LineChart extends mixins(Bar) {
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
  })
  }
}
</script>