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) {
      test: /.js$/,
      loader: ‘babel-loader’,
      include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/vue-echarts-v3/src’)]
    3. In vue module i added :
      import { QCard, QCardSection } from ‘quasar’
      import IEcharts from ‘vue-echarts-v3’

    <q-page class=“flex flex-center”>
    <img alt=“Quasar logo” src="~assets/quasar-logo-full.svg">
    <div name=“divchart” class=“echarts”>


    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
    <MyLayout> at src/layouts/MyLayout.vue
    <App> at src/App.vue

    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”

  • @minko Can you post your quasar.config.js ?

    I am getting error

    ReferenceError: resolve is not defined

    After adding

              test: /\.js$/,
              loader: 'babel-loader',
             include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]

  • Ok, I looked at and didn’t have to add anything in quasar.conf.js
    It just works.

Log in to reply