Can't install vue3 apex charts on Nuxt App

[brainlet-ali]

In newly created Nuxt app every time I try to install apex chart via:

npm install --save apexcharts npm install --save vue3-apexcharts

Here is log of errors:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: [email protected] npm ERR! node_modules/vue npm ERR! peer vue@"> 3.0.0" from [email protected] npm ERR! node_modules/vue3-apexcharts npm ERR! vue3-apexcharts@"*" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^2.0.0" from [email protected] npm ERR! node_modules/vuex npm ERR! vuex@"^3.6.0" from @nuxt/[email protected] npm ERR! node_modules/@nuxt/vue-app npm ERR! @nuxt/vue-app@"2.14.12" from @nuxt/[email protected] npm ERR! node_modules/@nuxt/builder npm ERR! @nuxt/builder@"2.14.12" from [email protected] npm ERR! node_modules/nuxt npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/ali/.npm/eresolve-report.txt for a full report.

[soerenmartius]

Nuxt requires Vue2, this module is meant to be for Vue 3.

[D-Marc1]

@soerenmartius I can't get this plugin to work with Nuxt 3 either, which ships with Vue 3.

[dvdhoek]

Any update on this?

[zhouzilong2020]

vue3-apexcharts works well with nuxt3 in my case.

[Bergrebell]

@zhouzilong2020 - can you share how you implemented it?

[Bergrebell]

this did the trick for me:

add apexchart as nuxt-plugin (filename with .client.js-ending is important)

# ~/plugins/apexcharts.client.js

import VueApexCharts from "vue3-apexcharts";

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

then you can just add the chart like that:

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

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

source: https://github.com/nuxt/framework/discussions/5352

[zhouzilong2020]

@zhouzilong2020 - can you share how you implemented it?

I did exact the same thing as you did. lol BTW, Glad to hear that you figure it out, it took me a while to find the solution.

[JeremyQtweb]

Sooo frustrating... have replicated your code exactly @Bergrebell to test this... and I get;

So many different suggestions and solutions around but I think it comes down to 2/3 things;

• Most of the solutions worked before Nuxt 3 went stable
• Most of the solutions work in JS but maybe not TS somehow
• Apexcharts has a bug now that needs resolving

Could have been amazing but not quite there yet :(

[JeremyQtweb]

Annnd I just fixed it by trying the <ClientOnly> wrapper again for the umpteenth time and BOOM... it worked HAHAHA

Thanks for the breadcrumb I needed @Bergrebell 👍

[leeyesang]

@JeremyQtweb Hello, I have problumn same thing as you. can you share how you implemented it? :)

[karis]

it should be closed issue

[wobsoriano]

this did the trick for me:

add apexchart as nuxt-plugin (filename with .client.js-ending is important)

# ~/plugins/apexcharts.client.js

import VueApexCharts from "vue3-apexcharts";

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

then you can just add the chart like that:

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

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

source: nuxt/framework/discussions/5352

Updated source: https://github.com/nuxt/nuxt/discussions/16482