NuxtJS

Demo of using ZingGrid and ZingChart in a NuxtJS app

This project demonstrates using zingchart-vue in a NuxtJS application.

client-only tag

1. The client-only tag is required around the ZingChartVue tags

<template>
  <div>
    <client-only>
      <ZingChartVue ref="chart" :data="chartData" />
    </client-only>
  </div>
</template>

<script setup>
import { onBeforeMount } from 'vue'
import ZingChartVue from "zingchart-vue";

const chartData = {
  type: "line",
  series: [
    {
      values: [6, 4, 3, 4, 6, 6, 4],
    },
  ],
};

2. The zingchart (and probably ZC) variables can only be accessed in the onBeforeMounted lifecycle hook.

onBeforeMount(() => {
  zingchart.BUILDCODE = [
    "BUILDE_CODE",
    "COMPANY_NAME",
  ];
});

3. To import a component globally, register it as a client-side plugin.

a. Create the plugin file plugins/zingchart-vue.client.js (must be in plugins/ and have the .client suffix)

b. Have the following the plugin file: (can also set license or other settings globally here) import ZingChartVue from "zingchart-vue";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("ZingChartVue", ZingChartVue); 
  
  // Global settings
  zingchart.DEV.KEEPSOURCE = 0
  zingchart.LICENCE = ['LICENSE'];
});

4. To import the ZC and zingchart properties globally, create the plugin (uses .use instead of .component on nuxtApp.vueApp:

plugins/zingchart.client.js

import ZingChartVue from "zingchart-vue";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use("ZingChartVue", ZingChartVue); 
 });