Using amCharts 5 with Nuxt 3

Using

Nuxt is a Vue framework: use our @amcharts/amcharts5-vue package, as in the Vue.js tutorial. It works with Nuxt’s server rendering: there is no need for <ClientOnly>, and nothing to set in nuxt.config.ts.

Follow the directions for installing Nuxt, then install amCharts:

npm install @amcharts/amcharts5 @amcharts/amcharts5-vue

Add this to nuxt.config.ts. Without it, the dev server prepares amCharts while the first page loads, and the charts fail to load until it is started again:

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ["@amcharts/amcharts5", "@amcharts/amcharts5/element"]
    }
  }
});

Then use the package in any component:

<script setup>
import { useTemplateRef } from "vue";
import { useAmChart, AmChart } from "@amcharts/amcharts5-vue";
import * as am5xy from "@amcharts/amcharts5/xy";

useAmChart(useTemplateRef("chart"), (root) => {
  const chart = root.container.children.push(am5xy.XYChart.new(root, {}));
  // ... axes, series and data
});
</script>

<template>
  <div ref="chart" style="height: 500px"></div>
  <AmChart :config="config" style="height: 500px" />
</template>

A license key goes in a client plugin, e.g. plugins/amcharts.client.ts:

import * as am5 from "@amcharts/amcharts5";

export default defineNuxtPlugin(() => {
  am5.addLicense("AM5C-...");
});

An example app is on GitHub.

Example

» amCharts 5 with Nuxt

Without the package

To use the code from the Vue.js tutorial without the package, render the component in <ClientOnly>:

<ClientOnly>
  <Chart />
</ClientOnly>