How to add "vue-echarts-v3" in Quasar CLI



  • Hello !
    I want to add lib “vue-echarts-v3” to Quasar CLI project.

    What i have done :

    1. Installed “vue-echarts-v3” as “npm install --save echarts vue-echarts-v3”
    2. Edited “quasar.conf.js” as added "build: {
      scopeHoisting: true,
      extendWebpack (cfg) {
      })
      cfg.module.rules.push({
      test: /.js$/,
      loader: ‘babel-loader’,
      include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/vue-echarts-v3/src’)]
      })
      }
      },
      "
    3. In vue module i added :
      “<script>
      import { QCard, QCardSection } from ‘quasar’
      import IEcharts from ‘vue-echarts-v3’
      …”

    "
    <template>
    <q-page class=“flex flex-center”>
    <img alt=“Quasar logo” src="~assets/quasar-logo-full.svg">
    <div name=“divchart” class=“echarts”>
    <i-echarts
    :option=“bar”
    :loading=“loading”
    @ready=“onReady”
    @click=“onClick”
    />

    "

    When load the app in browser i look in Console and there have message
    "
    vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <i-echarts> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

    found in

    —> <PageIndex> at src/pages/Index.vue
    <QPageContainer>
    <QLayout>
    <MyLayout> at src/layouts/MyLayout.vue
    <App> at src/App.vue
    <Root>
    "

    I’m new in Vue, and i cant understood why IECharts are not visible/reachable.

    Can somebody help me, please !



  • Resolved - а spelling error for “componets” instead of “components”


Log in to reply