Vue js Highmaps - How to load map? - highcharts

Question

I'm kinda new to Vue.js but today I am trying to setup some sort of map to show data. I ended up picking Highmaps since it seemd like the best alternative of the bunch and also because I already used it (Highcharts) for other projects.
Now the problem arises because I am developing a component driven webapp but I want to import maps from Highmaps. Since they just use CDN paths I don't really know how to implement them by using the import statement. Below is some code to make you understand better.
--- main.js ---
import Vue from 'vue'
import App from './App'
import MapComponent from './components/MapComponent.vue'
import Highcharts from 'highcharts';
import HighMaps from '../node_modules/highcharts/highmaps.js'
import VueHighcharts from 'vue-highcharts'
import loadMap from 'highcharts/modules/map';
loadMap(Highcharts);
Vue.use(VueHighcharts, { Highcharts });
Vue.use(HighMaps);
Vue.component('app-map', MapComponent)
new Vue({
el: '#app',
router: router,
components: { App },
template: '<App/>'
})
------------------------
--- MapComponent.vue ---
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import Element from 'element-ui';
import axios from 'axios';
import HighCharts from 'vue-highcharts';
export default {
data () {
return {
chartOptions: {
chart: {
map: 'countries/it/it-all'
},
...
}
},
}
</script>
This is what you can see from the browser, the errors appear when I try to press the + / - or when I scroll inside the map's borders
As you can see inside the script tag I already imported some libraries but I can't undestand how to import Highmaps too.

Answer 1

I can see in the image you have an error:
Uncaught ReferenceError, HighCharts is not defined at ...
This is because, whenever you import a library for Vue, you should provide it as a component.
So, you have to add this:
import HighCharts from 'vue-highcharts';
export default {
//...
components: { HighCharts },
//...
}

Answer 2

The problem here it's that the CDN imports VueHighcharts, you can register it globally as
Vue.use(VueHighcharts, { Highcharts: Highcharts })
and then use it everywhere
<highmaps :options="options"></highmaps>
Take a look at the examples on the bottom of the Lib Readme
Also, it's better to install it via npm to have a better modular structure to work with webpack (or whatever you use)

Answer 3

Right now I have found a way (probably cheesy) to force the map data into the map itself by copy pasting the object inside a variable and then referencing it into the chart.map
I understand that this is probably very bad since Vue needs to go and compile all of that object right inside the component but I hope it is a temporary solution.
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import Element from 'element-ui';
import axios from 'axios';
import HighCharts from 'vue-highcharts';
export default {
data () {
var country= {"title":"Italy","version":"1.1.2","type":"FeatureCollection","copyright":"Copyright...}
return {
chartOptions: {
chart: {
map: country
},
...
}
</script>
You can find the map data at this url (choose the GeoJSON option)
EDIT
I have finally found a good way of doing this by just saving the raw json data of the map into a local .json file and importing it as follows:
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import HighCharts from 'vue-highcharts';
import json from '../map.json'
export default {
data () {
return {
chartOptions: {
chart: {
map: json,
},
...
}
</script>