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

minko

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

What i have done :

Installed “vue-echarts-v3” as “npm install --save echarts vue-echarts-v3”
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’)]
})
}
},
"
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 !

minko

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

gvorster

@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')]
        })

gvorster

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

No More Posting New Topics!

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