• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

    Change Log

    •

    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); 
 });