`SVG is not defined` when combined with `vue3-apexcharts`

[adamndev]

Hey, thanks for the Nuxt plugin 👌🏻

Any ideas why installing this alongside vue3-apexcharts gives this error?

Reproduction link

[e-chan1007]

The loader of SVG.js (which apexcharts depends on) seems to conflict with the one of monaco-editor. This error should be fixed in v1.1.3 by delaying the loading timings of monaco-editor.

[adamndev]

Thank you for looking at this, but still seeing this same error and the one below when I add the nuxt-monaco-editor in the same app and navigate to a page. I've updated the reproduction link above.

The chart is a .client component, and I've also tried like this to see if I can delay the loading of SVG library but no luck there.

components: {
  ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
},

I really appreciate the help @e-chan1007 👍🏻

[e-chan1007]

You should also add a plugin like this:

// ~/plugins/apexcharts.client.ts

import VueApexCharts from 'vue3-apexcharts';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueApexCharts);
});

/*
  (The same code without nuxt)
  https://github.com/apexcharts/vue3-apexcharts#usage

  import VueApexCharts from "vue3-apexcharts";

  const app = createApp(App);
  app.use(VueApexCharts);
*/

This will load the SVG library correctly and <apexchart> will also be added automatically.

[adamndev]

Works perfectly, thanks!

Seems the issue was with trying to import ApexCharts on demand instead of just importing it globally as per the docs.