How To Use Apex Charts in Nuxt.js Web Application Dashboard

How to Start Apex Charts with your Nuxt.js Admin Dashboard Web Application

Apex Charts Official Website

Apex Charts: A Powerful Graph Chart Library for Web Applications. Apex Charts is a versatile graph chart library designed for web applications, seamlessly integrating with popular JavaScript frameworks like React, Angular, and Vue.

Create an Impressive Admin Dashboard with Apex Charts and Nuxt.js
Leverage the exceptional features offered by Apex Charts to develop a visually stunning admin dashboard for your Nuxt.js project. Customize themes, choose from light or dark modes, explore a range of color options or gradients, and enjoy zoom functionality for enhanced data visualization.

Discover Apex Charts, an open-source project boasting an array of impressive features. With 16 chart types, MIT Licenses, 1 million monthly downloads, and no registration required, it’s the ideal choice for developers. Additionally, benefit from over 100 included samples and comprehensive documentation for React, Vue, Angular, and JavaScript implementations.

Getting Started

In your Nuxt.js web application project root, install, or add Apex Charts on the terminal and the dependencies. This will add and download node modules for your Apex Charts for use in the Nuxt.js ecosystem.

Start with Yarn:

yarn add apexcharts vue-apexcharts --dev

Or with NPM:

npm install --save apexcharts
npm install --save vue-apexcharts

Configuration

Open your nuxt.config.js and add Apex Charts as a plugin so it can be accessed between components and pages in the Nuxt.js ecosystem.

Create a plugin file for Apex Charts plugins ./plugins/apex-chart.js in your Nuxt.js directory and add the client mode for client-side rendering only:

export default {
  ...
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~/plugins/apex-chart.js', mode: 'client' },
    { src: '~/plugins/chart.js', mode: 'client' },
    { src: '~/plugins/axios.js' }
  ],
  ...
}