Not working with npm

[franckysolo]

hello,
I'am trying to use your plugin in a Vuejs project but i' can't make it work, a error appear :
Cannot read property 'appendChild' of undefined
the error come from your CanvasRenderer class:

var CanvasRenderer = function(el, options) {
var cachedBackground;
	var canvas = document.createElement('canvas');

	el.appendChild(canvas);  // here

The component vue:

<template lang="html">
  <div class="easypiechart"
    :data-percent="percent" :data-size="size"
    :data-bar-color="color" data-scale-color="false"
    data-line-cap="round" data-line-width="4"
    :style="'width: ' + size + 'px; height: ' + size + 'px;'">
    <i :class="icon" class="fa fa-4x" :style="'line-height: ' + size + 'px;'"></i>
    <p class="text-uppercase text-lg mt-20 mb-0">
      <strong :class="className">{{ count }}</strong>
      <small class="text-md text-light text-default lt">{{ title }}</small>
    </p>
    <p class="text-light">
      <i class="fa fa-caret-down text-warning"></i>
      {{ percent }}% ce mois-ci
    </p>
    <canvas :height="size" :width="size"></canvas>
  </div>
</template>

<script>
import $ from 'jquery'
$.fn.easyPieChart = require('easy-pie-chart')
export default {
  props: ['count', 'percent', 'color', 'title', 'size', 'icon', 'className'],
  mounted () {
    $('.easypiechart').easyPieChart()
    this.$nextTick(() => {
      $('.easypiechart').data('easyPieChart').update(this.percent)
    })
  }
}
</script>

[jmarceli]

I was having a similar problem. The probable cause is calling .easyPieChart() on an element which is not a jQuery object. Maybe you should wait for $(document).ready(..) ? (I don't know VueJS so I can't give you exact answer).
In your case I would check the $('.easypiechart') value.

Aside note: It is possible to import jquery easy-pie-chart with:

import 'easy-pie-chart/dist/jquery.easypiechart';

Which is for me more elegant way of using it.