Vue Great Nepal component

Create a good looking map with Vue Great Nepal

If you are building an app that has to support different country maps, it might be a headache to do everything by yourself. That’s why there are different components for various types of maps. One of the components, that might be needed for you, is Vue Great Nepal map. This component will help you to implement interactive map.

Demo Check on GitHub

Implementing a map with Vue Great Nepal component

Component features

There are a few props that will help you to config things, such as colors, or map width.

set-random-colorBooleanfalseSets random color for every item in the map
hover-colorString (Color name e.g: red or color HEX code)#eee4edSet background color on map hover
stroke-widthNumber1Set line width of map
stroke-colorString (Color name e.g: red or color HEX code)1Set line color of map
province-colorsArray (Array of color codes for 7 provinces)[]Custom province color set e.g [‘red’, ‘blue’, ‘#FF00FF’…..] total 7. NOTE: Only applicable for DistrictMap and ProvinceMap
wrapper-classStringnullCustom class for whole map wrapper
item-classStringnullCustom class for each map item i.e. each district on DistrictMap

How to install and use Vue Great Nepal component

Process of installing the Great Nepal map for Vue component is easy and straightforward. Just like any other npm package, you can install it with:

npm install --save vue-great-nepal

After you’ve have the package locally, you can create a simple script in order to test if it works.

  <div id="app">     

import { DistrictMap, ZoneMap, ProvinceMap } from 'vue-great-nepal'

export default {   
    name: 'App',   
    components: {    
    methods: {     
      mapClicked(data) {       

There are two events you might trigger on the map:

on-map-clicktrigger on every map item click
on-map-hovertrigger on every map item hover

This is how you can test the events:

  area: 3312,
  headquarter: "Salleri",
  headquarter_ne: "सल्लेरी",
  max_elevation: 8848,
  name: "Solukhumbu",
  name_ne: "सोलुखुम्बु",
  population: 105886,
  province: 1,
  website: "",
  zip: 56000

If you do want to check how it looks live, check the demo application, provided in the first paragraph of this article.