How to use Highcharts in vue3?

@Sinnbeck

This is my sample

<template>
  <vue-highcharts
    type="chart"
    :options="chartData"
    :redrawOnUpdate="true"
    :oneToOneUpdate="false"
    :animateOnUpdate="true"
    @rendered="onRender"
    @update="onUpdate"
    @destroy="onDestroy"/>
</template>

<script setup>
import VueHighcharts from 'vue3-highcharts';

import { ref, computed } from 'vue'

const chartData = computed(() =>{
  return {
    chart: {
      type: 'bubble',
    },
    title: {
      text: 'Carbon emissions around the world (2014)'
    },
    tooltip: {
      useHTML: true,
        pointFormat: '<b>{point.name}:</b> {point.value}m CO<sub>2</sub>'
    },

    series: [{
      name: 'Europe',
      data: [{
        name: 'Germany',
        value: 767.1
      }, {
        name: 'Croatia',
        value: 20.7
      },
        {
          name: "Belgium",
          value: 97.2
        },
        {
          name: "Czech Republic",
          value: 111.7
        },
        {
          name: "Netherlands",
          value: 158.1
        },
        {
          name: "Spain",
          value: 241.6
        },
        {
          name: "Ukraine",
          value: 249.1
        },
        {
          name: "Poland",
          value: 298.1
        },
        {
          name: "France",
          value: 323.7
        },
        {
          name: "Romania",
          value: 78.3
        },
        {
          name: "United Kingdom",
          value: 415.4
        }, {
          name: "Turkey",
          value: 353.2
        }, {
          name: "Italy",
          value: 337.6
        },
        {
          name: "Greece",
          value: 71.1
        },
        {
          name: "Austria",
          value: 69.8
        },
        {
          name: "Belarus",
          value: 67.7
        },
        {
          name: "Serbia",
          value: 59.3
        },
        {
          name: "Finland",
          value: 54.8
        },
        {
          name: "Bulgaria",
          value: 51.2
        },
        {
          name: "Portugal",
          value: 48.3
        },
        {
          name: "Norway",
          value: 44.4
        },
        {
          name: "Sweden",
          value: 44.3
        },
        {
          name: "Hungary",
          value: 43.7
        },
        {
          name: "Switzerland",
          value: 40.2
        },
        {
          name: "Denmark",
          value: 40
        },
        {
          name: "Slovakia",
          value: 34.7
        },
        {
          name: "Ireland",
          value: 34.6
        },
        {
          name: "Croatia",
          value: 20.7
        },
        {
          name: "Estonia",
          value: 19.4
        },
        {
          name: "Slovenia",
          value: 16.7
        },
        {
          name: "Lithuania",
          value: 12.3
        },
        {
          name: "Luxembourg",
          value: 10.4
        },
        {
          name: "Macedonia",
          value: 9.5
        },
        {
          name: "Moldova",
          value: 7.8
        },
        {
          name: "Latvia",
          value: 7.5
        },
        {
          name: "Cyprus",
          value: 7.2
        }]
    }, {
      name: 'Africa',
      data: [{
        name: "Senegal",
        value: 8.2
      },
        {
          name: "Cameroon",
          value: 9.2
        },
        {
          name: "Zimbabwe",
          value: 13.1
        },
        {
          name: "Ghana",
          value: 14.1
        },
        {
          name: "Kenya",
          value: 14.1
        },
        {
          name: "Sudan",
          value: 17.3
        },
        {
          name: "Tunisia",
          value: 24.3
        },
        {
          name: "Angola",
          value: 25
        },
        {
          name: "Libya",
          value: 50.6
        },
        {
          name: "Ivory Coast",
          value: 7.3
        },
        {
          name: "Morocco",
          value: 60.7
        },
        {
          name: "Ethiopia",
          value: 8.9
        },
        {
          name: "United Republic of Tanzania",
          value: 9.1
        },
        {
          name: "Nigeria",
          value: 93.9
        },
        {
          name: "South Africa",
          value: 392.7
        }, {
          name: "Egypt",
          value: 225.1
        }, {
          name: "Algeria",
          value: 141.5
        }]
    }, {
      name: 'Oceania',
      data: [{
        name: "Australia",
        value: 409.4
      },
        {
          name: "New Zealand",
          value: 34.1
        },
        {
          name: "Papua New Guinea",
          value: 7.1
        }]
    }],
    credits: {
      enabled: false
    },
  }
});

const onRender = () => {
  console.log('Chart rendered');
};

const onUpdate = () => {
  console.log('Chart updated');
};

const onDestroy = () => {
  console.log('Chart destroyed');
};
</script>

i am getting this error

highcharts.js:13 Uncaught (in promise) Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=packedbubble
 - missingModuleFor: packedbubble
    at Object.eval (highcharts.js:13)
    at J (highcharts.js:19)
    at v (highcharts.js:13)
    at a.initSeries (highcharts.js:365)
    at eval (highcharts.js:396)
    at Array.forEach (<anonymous>)
    at a.firstRender (highcharts.js:396)
    at a.eval (highcharts.js:365)
    at J (highcharts.js:19)
    at a.init (highcharts.js:364)

I am not sure how to solve this or the package itself does not support the chart? Or i misconfigure it?

@zidance are you importing it as shown here? It's a seperate module

https://github.com/smithalan92/vue3-highcharts#using-stockmap-charts

@Sinnbeck But packedbubble not found under module. I can't find any module related to it.

@Sinnbeck ok, i found out i need do in this way

import VueHighcharts from 'vue3-highcharts';
import HighchartsMore from 'highcharts/highcharts-more'
import Highcharts from 'highcharts'

HighchartsMore(Highcharts)

@zidance good to hear. Mark your answer as best to set the thread as solved