vuejs зарегистрировать проблему компонента

Question

Я установил ApexChart через

npm install vue-apexcharts

и на моем bootstrap.js файл я импортирую как

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

и на моем app.js file я импортирую файл bootstrap.js

require('./bootstrap');
Vue.component('products', require('./components/ProductComponent.vue'));
Vue.component('employees', require('./components/EmployeesComponent.vue'));
Vue.component('orders', require('./components/OrdersComponent.vue'));
Vue.component('display-products', require('./components/DisplayProducts.vue'));
Vue.component('order-products', require('./components/OrderProductComponent.vue'));
Vue.component('dashboard', require('./components/DashboardComponent.vue'));

const app = new Vue({
    el: '#app'
});

в моем файле Vue я пытался

<apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>

но я получаю did you register the component correctly?

Я использую Laravel W / Vue JS

Answer 1

Вам нужно зарегистрировать компонент следующим образом, если вы хотите использовать:

components: { apexcharts: VueApexCharts }

Полный пример здесь:

import VueApexCharts from 'vue-apexcharts'

export default {
    components: {
      apexcharts: VueApexCharts,
    },
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }]
      }
    },
};

Answer 2

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)

Внутри вашего основного файла (bootstrap.js) вам нужно импортировать его таким образом, а затем использовать в каждом своем файле.