Let’s walk through the most likely reasons your vue-echarts component isn’t appearing in the DOM, now that you’ve fixed the SyntaxError Unexpected token 'export' issue:

1. Server-Side Rendering (SSR) Conflicts #

Nuxt.js renders pages on the server by default, but ECharts depends on browser-specific APIs like window that don’t exist during SSR. This can block the chart from initializing properly without throwing an obvious error.

Fixes: #

• Wrap your <v-chart> component in Nuxt’s <client-only> tag to force it to render only on the client side:

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

• Or, create a client-side plugin to register vue-echarts globally:
  1. Add this to your nuxt.config.js:

     export default {
       build: {
         transpile: ['vue-echarts', 'resize-detector']
       },
       plugins: [
         { src: '~/plugins/vue-echarts.js', mode: 'client' }
       ]
     }
     

  2. Create plugins/vue-echarts.js with:

     import Vue from 'vue'
     import { use } from "echarts/core"
     import { CanvasRenderer } from "echarts/renderers"
     import { PieChart } from "echarts/charts"
     import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components"
     import VChart from "vue-echarts"
     
     use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
     Vue.component('v-chart', VChart)
     

2. Incompatible vue-echarts Version #

If you’re using Vue2, you might have accidentally installed vue-echarts v5+ (which is built exclusively for Vue3). This version mismatch can cause silent rendering failures.

Fix: #

• Downgrade to vue-echarts v4 (the last version compatible with Vue2):

  npm install vue-echarts@4
  

• Update your component code to match v4’s syntax (import paths are different):

  <template>
    <v-chart class="chart" :option="option" />
  </template>
  <script>
  import ECharts from 'vue-echarts/components/ECharts'
  // Import required ECharts modules
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/legend'
  
  export default {
    name: "HelloWorld",
    components: {
      'v-chart': ECharts
    },
    data() {
      return {
        option: {
          // ... your existing chart option here
        }
      };
    }
  };
  </script>
  

3. Missing ECharts Styles #

Without the required CSS, the chart might render but be completely invisible (no height, no colors, no borders).

Fix: #

• Add ECharts styles to your component or global CSS:

  /* In your component's <style> tag for vue-echarts v5+ */
  @import 'echarts/dist/echarts.css';
  /* Or for vue-echarts v4 */
  @import 'vue-echarts/dist/vue-echarts.css';
  

4. Lifecycle Timing Issues #

Sometimes the chart tries to initialize before the client-side DOM is fully ready in Nuxt, leading to a failed render.

Fix: #

• Delay setting the chart option until the component is mounted:

  <script>
  // ... imports and setup code
  
  export default {
    name: "HelloWorld",
    components: { VChart },
    provide: {
      [THEME_KEY]: "dark"
    },
    data() {
      return {
        option: null
      };
    },
    mounted() {
      // Assign option only after the component is mounted in the browser
      this.option = {
        // ... your chart option here
      }
    }
  };
  </script>
  

内容的提问来源于stack exchange，提问作者Cacious