https://github.com/themustafaomar/vuevectormap
A Vue wrapper component for Jsvectormap
https://github.com/themustafaomar/vuevectormap
maps nuxt nuxtjs vector-map-javascript vue-wrapper-component vuejs
Last synced: 9 months ago
JSON representation
A Vue wrapper component for Jsvectormap
- Host: GitHub
- URL: https://github.com/themustafaomar/vuevectormap
- Owner: themustafaomar
- License: mit
- Created: 2020-04-16T18:44:35.000Z (about 6 years ago)
- Default Branch: next
- Last Pushed: 2024-11-10T00:21:36.000Z (over 1 year ago)
- Last Synced: 2025-04-14T03:14:06.368Z (about 1 year ago)
- Topics: maps, nuxt, nuxtjs, vector-map-javascript, vue-wrapper-component, vuejs
- Language: JavaScript
- Homepage: https://jvm-docs.vercel.app/docs/integrate-with-vue
- Size: 1.96 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueVectorMap
A Vue wrapper component for [jsvectormap](https://github.com/themustafaomar/jsvectormap)
## Versions
| Vuejs version | Package version | Branch |
| :--- |:---------------:| ---: |
| 3.x | 2.x | `next` |
| 2.x | 1.x | [master](https://github.com/themustafaomar/vuevectormap/tree/master) |
## Installation
To get started with vuevectormap, you can install it through your preferred package manager.
```bash
npm i vuevectormap@next # pnpm add vuevectormap || yarn add vuevectormap
```
## Demo
Example at [vuevectormap](https://codepen.io/themustafaomar/pen/pojyerx)
Example at [codesandbox](https://4f9cw.csb.app) and [code](https://codesandbox.io/s/vuevectormap-4f9cw)
## Get started
```js
import { createApp } from 'vue'
import vueVectorMap from 'vuevectormap'
import 'vuevectormap/src/scss/vuevectormap.scss'
import 'jsvectormap/dist/maps/world'
const app = createApp({
//
})
app.use(vueVectorMap, {
// Set global options if any etc..
backgroundColor: '#f6f6f6',
})
app.mount('#app')
```
Just define `vuevectormap` component and we're done!
**Notice**: the default map is world, so you don't have to pass `map` prop.
```vue
```
**Tip:** if you're using sass and and you want to overwrite the default style, the below snippet is for you.
Look at [this file](https://github.com/themustafaomar/jsvectormap/blob/master/src/scss/jsvectormap.scss) to know about all possible variables.
```scss
// Example variables.
$tooltip-bg-color: #3a3d4c;
$tooltip-font-family: Roboto, Etc;
@import 'jsvectormap';
```