Apache E chart with Nuxt 3

Hi ,
Hope everyone is doing great , when i was working with one of my client I have come with requirement to add apache e chart with nuxt 3 , i have followed the tutorial that has been given by Destaq .

https://stackblitz.com/edit/github-unqktr?file=app.vue

This is a very good starter and it helped me a lot start over with apache echart .

But i think this was meant to be for the beta version of nuxt 3 , when i followed ,i had ended up with a working code but while i tried to host it in the netifly instance the production url get completly brocken , i got internal server error even if i take a yarn build and run using ./output folder the site getting brocken .
So i took some research what is happening in background for this error and ended up with a working code , i dont want to waste your valuable time lets jumb to the code.

Create a nuxt instance using

npx nuxi@latest init nuxt-with-apache-echart

Add the echart library with vue-echart

$ npm install echarts vue-echarts

To make vue-echarts work for Vue 2 or Nuxt 2 (<2.7.0), you need to check vue-echarts here am only concentrating on Nuxt 3

In the nuxt config add

build: {
    transpile: ['echarts', 'zrender', 'tslib'],
  },

Add some html and chart options in app.vue

<template>
  <div>
    <client-only>
      <VChart class="chart" :option="option" />
    </client-only>
  </div>
</template>

<script lang="ts" setup>
import { PieChart } from 'echarts/charts'
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ref } from 'vue'
import VChart from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
])
const option = ref({
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

</script>
<style scoped>
.chart {
  height: 100vh;
}
</style>

There you go , so simple right , before that try

npm run build && node .output/server/index.mjs

This should show up a pien chart on http://localhost:3000

If you want the StackBlitz link here you go

Alshoja - Nuxt With Apache Echart - StackBlitz

Thank you enjoy coding ❤ let me know your comments :) .