Add example for nuxt3 (ssr) to the documentation

[Rednas83]

After exactly following the instruction I am getting

Tried wrapping apexchart component in ClientOnly component but that didn't fix the issue

  <ClientOnly>
    <div>
      <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
    </div>
  </ClientOnly>

Anyone has a fix for nuxt3?

[Sebarkar]

Change the plugin file name to *.client.ts

[Rednas83]

Just tried with a javascript plugin because for typescript we will need to wait for official support or for an external declaration file🤞

plugins/apex.client.js

import VueApexCharts from "vue3-apexcharts";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueApexCharts)
})

components/vchart.vue

<template>
  <ClientOnly>
    <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
  </ClientOnly>
</template>

<script setup lang="ts">
const options = ref({
  chart: {
    id: "vuechart-example",
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
  },
})
const series = ref([
  {
    name: "series-1",
    data: [30, 40, 45, 50, 49, 60, 70, 91],
  },
])
</script>

Unfortunately this is also not working😢
Terminal

Console

Any more ideas?

[Sebarkar]

import VueApexCharts from 'vue3-apexcharts'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(VueApexCharts) // missed
    return {
        provide: {
            charts: VueApexCharts,
        }
    }
})

[Rednas83]

Got it working😀 The ungroup error was caused by a conflicting custom ungroup function. Also don't forget to wrap apexchart with ClientOnly to avoid a hydration mismatch

plugins/apex.client.js

import VueApexCharts from "vue3-apexcharts";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueApexCharts)
})

components/vchart.vue

<template>
  <h2>Charting with apex</h2>
  <ClientOnly>
    <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
  </ClientOnly>
</template>

<script setup lang="ts">
const options = ref({
  chart: {
    id: "vuechart-example",
  },
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
  },
})
const series = ref([
  {
    name: "series-1",
    data: [30, 40, 45, 50, 49, 60, 70, 91],
  },
])
</script>

Perhaps this example can also be added to the docs for nuxt users?