Nuxt import highcharts for client side only

Roman Koblents 0
Viewed 24

In my vue app I had following import in my component

import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
treemapInit(Highcharts);

Now I have nuxt and I need to import this part only for client side, because it fails with an error on server-side.

How to do this? Please don't suggest me Nuxt plugins, since I want to use it local due to performance.

Thanks!

client-side dynamic-import highcharts nuxt.js vue.js
1 Answers

The code executes twice - on server-side and then on client-side. The first run is done in an environment that lacks window and causes Highcharts to be loaded, but not initialized. The fix is to place all modules inits in if checking if Highcharts is an object or a function. It should be an object for module initialization:

import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";


if (typeof Highcharts === "object") {
  treemapInit(Highcharts);
}

Docs: https://github.com/highcharts/highcharts-vue#readme

Similar thread: https://github.com/highcharts/highcharts-vue/issues/73

ppotaczek0
Related