Highcharts 12 "more" won't work (workaround included)

[ver1000000]

Highcharts 12

On Highcharts 12 extended set of charts [more] doesn't work.

My code looks like

<template lang="pug">
highchart(more :options="chartOptions")
</template>

<script setup>
import HighCharts from 'highcharts'
const chartOptions = { ... }

I see it was addressed in #63 with solution like

import HC from 'highcharts';
import More from 'highcharts/highcharts-more';
More(HC);

and it did't work for me.

Solution

So I tried another approach:

<template lang="pug">
highchart(:options="chartOptions")
</template>

<script setup>
import HighCharts from 'highcharts/highcharts-more'
const chartOptions = { ... }

Basically you remove more attribute and import 'highcharts/highcharts-more'

At the same time it might not work with SSR even if you wrap with <ClientOnly>:

In this case I just used async loading of component.

This might be helpful for who faced the same issue with new version of Highcharts.

Highmaps

Unfortunately I wasn't able to solve the problem with maps