How to add a license in a nuxt 3 application

[lasabahebwa]

When I add this line: zingchart.BUILDCODE = ["abcdefghijklmnopqrstuvwxy"];

I run into a "zingchart is not defined" error as shown in the attached image

zingcharts-demo.zip

[jeanettephung]

The zingchart variable is not accessible right away. It can only be accessed right before the component is mounted. Therefore, zingchart can only be accessed in onBeforeMounted lifecycle hook.

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

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

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

onBeforeMounted(() => {
  zingchart.BUILDCODE = [
    "Build Code",
    "Company Name",
  ];
});
</script>

[jeanettephung]

@agois83

Should we consider creating a NuxtJS integration docs page? There are at least two useful information required in using zingchart-vue in a NuxtJS application.

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 -- needs testing) 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. (* clarifying with LS when this is necessary. Tested and the #3 solution is sufficient) 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); 
 }); 

[agois83]

Tasked to PINT to create new NUXT JS integration page on zingchart.com

[lasabahebwa]

@agois83 the task at hand which was about adding a license in a nuxt app was resolved. We're waiting for PINT to create new NUXT JS integration page on zingchart.com so I'll close this issue.