DonutChart not working inside a component

[Adurnam]

Good afternoon,

I'm having an issue using the lib, specifically the DonutChart.

App.vue

<template>
  <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
    <DonutChart 
      id="donut" 
      :data="donutData" 
      colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
      resize="true">
    </DonutChart>
  </div>
</template>

<script>
import DonutChart from './components/DonutChart.vue'

export default {
  name: 'App',
  components: {
    DonutChart
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

DonutChart.vue

<script>

import Vue from 'vue'
import { DonutChart } from 'vue-morris'

new Vue({
  el: '#app',

  data: {
    donutData: [
    { label: 'Red', value: 300 },
    { label: 'Blue', value: 50 },
    { label: 'Yellow', value: 100 }
    ],

    components: {
    DonutChart
    }
  }
});
</script>

<style>

</style>

Main.js

import Vue from 'vue'
import App from './App.vue'

import Raphael from 'raphael/raphael'
global.Raphael = Raphael

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

I don't have any errors presently, juste a blank page. Do you have any thoughts on why?

Sincerely, Mathieu.

[bbonnin]

For the component, I think you should try something like this:

<template>
  <donut-chart id="donutChart" :data="donutData"></donut-chart>
</template>

<script>

import { DonutChart } from 'vue-morris'

export default {
  data() {
    return {
      donutData: [
        { label: 'Red', value: 300 },
        { label: 'Blue', value: 50 },
        { label: 'Yellow', value: 100 }
      ]
    }
  },

  components: {
    DonutChart
  }
}
</script>

<style>

</style>

[Samorinho]

Hello there, I have tried :

  <donut-chart id="donutChart" :data="donutData"></donut-chart>
</template>

<script>

import { DonutChart } from 'vue-morris'

export default {
  data() {
    return {
      donutData: [
        { label: 'Red', value: 300 },
        { label: 'Blue', value: 50 },
        { label: 'Yellow', value: 100 }
      ]
    }
  },

  components: {
    DonutChart
  }
}
</script>

<style>

</style>

and I have a jQuery undefined error. Thank you !

[bbonnin]

Are you using webpack ? You can check my config https://github.com/bbonnin/vue-morris-example/blob/master/webpack.config.js

[Samorinho]

Yes, same as yours. I'll keep digging

[Adurnam]

Regarding the jQuery issue, I had to go arround it aswell. I did this :

install jQuery using npm

added this code snippet in ** main.js **

import jQuery from 'jQuery'
global.jQuery = jQuery

Inside the package.json, I add this

"peerDependencies": {
    "jQuery": "^3.0.0"
  },
  "resolve": {
    "alias": {
      "vue$": "vue/dist/vue.common.js",
      "jquery": "jquery/src/jquery.js"
    }
  },

I'm not sure the peer dependencies and resolve are usefull, I think its only usefull if you use webpack. I hope this helps you.

I resolved my issue using your idea @bbonnin, I was mistaking the app.vue and the component.vue, and the confusion made me write code in wrong places !

thanks again.