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

M
minko Feb 19, 2019, 6:33 PM
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 !
1 G 1 Reply Last reply Mar 8, 2020, 7:33 PM

4
POSTS

351
VIEWS
Log in to reply
M
minko Feb 19, 2019, 11:52 PM

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

1

ABOUT A YEAR LATER

gvorster Mar 8, 2020, 7:33 PM @minko

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

G
gvorster Mar 8, 2020, 7:46 PM

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