Quasar SSR and echarts



  • Got it working like this.

    quasar.conf.js:

        boot: [
          'auth',
          'i18n',
          'axios',
          {
            server: false,
            path: 'echarts'
          }
        ],
    

    boot file:

    // https://github.com/xlsdg/vue-echarts-v3
    import * as ECharts from 'echarts/lib/echarts'
    import Wrapper from 'vue-echarts-v3/src/wrapper.js'
    
    const DIEcharts = Wrapper(ECharts)
    DIEcharts.__echarts__ = ECharts
    
    export default ({ Vue }) => {
      // register component to use
      Vue.component('di-echart', DIEcharts)
    }
    

    somponent:

    <template>
      <q-card class="q-pa-sm" style="background:#eeeeee">
        <q-card-section class="q-pa-none q-pt-md">
          <q-no-ssr>
            <di-echart
              v-if="getLineChartOptions"
              style="height: 250px;"
              :option="getLineChartOptions"
              :resizable="true"
            ></di-echart>
          </q-no-ssr>
        </q-card-section>
      </q-card>
    </template>
    <script>
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/tooltip'
    export default {
    .......
    

    Please confirm if this is a solid solution?


Log in to reply