[Chartjs]-How to use vuechartkick in nuxt js

by

0👍

Some plugins might work only in the browser because they lack SSR support.

vue-chartkick and chart.js cannot be run on server side, therefore you have to enable your custom plugin only on client side as follows:

plugins: [
   { src: '~/plugins/vue-chartkick.js', mode: 'client' }, 
],

or by naming convention *.client.js:

plugins: [ 
   '~/plugins/vue-chartkick.client.js',
],

See docs: https://nuxtjs.org/docs/2.x/directory-structure/plugins/#object-syntax

In addition, your component will be used to render a component only on client-side. So you have to use the <client-only> helper element in your Nuxt page as below:

<template>
  <div>
    <client-only placeholder="loading...">
      <your-chart-component>
    </client-only>
  </div>
</template>

To know more, see nuxt docs: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component

Leave a comment