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”

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

I am getting error

ReferenceError: resolve is not defined

After adding

cfg.module.rules.push({
          test: /.js$/,
          loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
        })

Ok, I looked at https://github.com/pratik227/echarts-quasar and didn’t have to add anything in quasar.conf.js
It just works.