How to integrate Vuejs with JVectorMap

The other day I was working on rewriting this project for a startup that I am working in,
anyways we needed to see a newer version of the the same stats pages in VueJs which included both some ChartJs and some jVectorMap.
Another requirement I needed to adhere to was for the app to work only as a tab inside the page, but that I will leave for another post.

To integrate ChartJs into Vue would be pretty simple since we can use the wrapper vue-chartjs but for jVectorMap you do not have such a great solution. And better yet (if you could call it that) you are required to include jQuery, if you are in that same boat with me then hopefully this post will help you out a bit.

I started with Vue CLI 3, using which i created a blank project  vue create frontend you might as well follow this very descriptive documentation. After finishing the creation and configuration of the project lets start.

Add a new component to which you are going to add the jVectorMap to.
Run the command  npm install jquery jvectormap --save the next thing we are going to do is to require jquery and jvectormap into our component.

Add to the template an element that the map will be injected into.

Now that we have all the minimal required configurations lets initialise the map and call it out.

With some extra attributes that could be found at the jVectorMap documentation page we got to our final result.