Vue.js Chartkick - Не удалось смонтировать компонент: шаблон или функция визуализации не определены

Question

Я новичок в vue.js, и я не уверен, почему я получаю сообщение об ошибке ниже - ваша помощь будет высоко ценится. Я думаю, что проблема может быть в файле ChartkickCharts.vue, но не уверен - ваш совет будет очень полезным

ошибка, которую я получаю:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <ChartkickCharts> at src\components\vueChartkick\ChartkickCharts.vue
       <App> at src\App.vue
         <Root>

App.vue

<template>
  <div id="app" class="container">

    <!-- chartkicks charts -->
    <div class="chartkickcharts">
      <ChartkickCharts></ChartkickCharts>
    </div>
    <!-- chartkicks charts -->

  </div>
</template>


<script>
import ChartkickCharts from '@/components/vueChartkick/ChartkickCharts'
export default {
  name: 'App',
  components: {
    ChartkickCharts
  }
}
</script>

ChartkickCharts.vue [components / vueChartkick / ChartkickCharts.vue]

<template src="../../views/chartkickhtml/chartkickcharts.html"></template>

<script>
    import ChartkickCharts from '@/assets/javascripts/chartkick'

    export default {
    components: {
      'line-chart': ChartkickCharts 
    },
    mixins:[ChartkickCharts],
      mounted(){
        console.log('Data is chartkick',this)
        },
  }
</script>

chartkickcharts.html [views / chartkickhtml / chartkickcharts.html]

<div class="wrapper">
  <div class="chart_header">chartkick line chart</div>
  <line-chart :data="chartData"></line-chart>
</div>

chartkick.js [assets / javascripts / chartkick.js]

import VueChartkick from 'vue-chartkick'

export default {
  components: {
    VueChartkick
  },

  data() {
    return {
      chartData: [
          ["Jan", 4], 
          ["Feb", 2], 
          ["Mar", 10], 
          ["Apr", 5], 
          ["May", 3]
        ],
      chartOptions: {
        chart: {
          title: 'Company Performance'
        }
      }
    }
  },
  mounted() {
    //this.datacollection
  }
}

Answer 1

Вы импортируете chartkick.js и использовать его как компонент Vue

components: {
  'line-chart': ChartkickCharts 
}

но в chartkick.js нет шаблона. Вы можете попробовать удалить объявление компонентов выше, и я думаю, что все будет в порядке.