Vue js Highmaps - How to load map?

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

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>

Answer 2

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 3

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)