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