### Install VueVectorMap Package

Source: https://github.com/themustafaomar/vuevectormap/blob/next/README.md

Installs the VueVectorMap package using npm, pnpm, or yarn. Ensure you are using the correct version (`@next` for Vue 3.x).

```bash
npm i vuevectormap@next # pnpm add vuevectormap || yarn add vuevectormap
```

--------------------------------

### Install VueVectorMap Plugin and Global Configuration (JavaScript)

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Installs the vuevectormap plugin in a Vue 3 application with optional global configuration. This configuration applies to all map instances created within the application. It requires importing the plugin, the necessary CSS, and the specific map data.

```javascript
import { createApp } from 'vue'
import vueVectorMap from 'vuevectormap'
import 'vuevectormap/src/scss/vuevectormap.scss'
import 'jsvectormap/dist/maps/world'

const app = createApp({
  // Your root component
})

// Install with global options
app.use(vueVectorMap, {
  backgroundColor: '#f6f6f6',
  // Any other global jsvectormap options
})

app.mount('#app')
```

--------------------------------

### Loading Different Maps in VueVectorMap

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Demonstrates how to load and display various geographical maps using VueVectorMap. It shows examples for world, US, and European maps by importing the corresponding map files from the `jsvectormap/dist/maps/` directory.

```vue
<template>
  <div>
    <!-- World Map -->
    <vuevectormap
      :options="{ map: 'world' }"
      width="700"
      height="350">
    </vuevectormap>

    <!-- US Map -->
    <vuevectormap
      :options="{ map: 'us_aea' }"
      width="700"
      height="350">
    </vuevectormap>

    <!-- Custom Region Map -->
    <vuevectormap
      :options="{ map: 'europe_mill' }"
      width="700"
      height="350">
    </vuevectormap>
  </div>
</template>

<script setup>
import 'jsvectormap/dist/maps/world'
import 'jsvectormap/dist/maps/us-aea'
import 'jsvectormap/dist/maps/europe-mill'
</script>
```

--------------------------------

### Map with Lines Between Markers (Vue)

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Connects markers with animated lines to visualize relationships or routes between locations. This example defines markers and then specifies pairs of markers to connect using the 'lines' and 'lineStyle' options. It utilizes the 'world_merc' map.

```vue
<template>
  <vuevectormap
    width="800"
    height="450"
    :options="{
      map: 'world_merc',
      markers: [
        { name: 'Canada', coords: [56, -106] },
        { name: 'Palestine', coords: [31.5, 34.8] },
        { name: 'Greenland', coords: [72, -42] },
        { name: 'Russia', coords: [61, 105] },
        { name: 'Brazil', coords: [-14.2350, -51.9253] }
      ],
      markerStyle: {
        initial: { fill: '#ff4551' }
      },
      lines: [
        { from: 'Canada', to: 'Palestine' },
        { from: 'Canada', to: 'Greenland' },
        { from: 'Canada', to: 'Russia' },
        { from: 'Canada', to: 'Brazil' }
      ],
      lineStyle: {
        strokeDasharray: [6, 3, 6],
        animation: true
      }
    }">
  </vuevectormap>
</template>
```

--------------------------------

### Map with Markers and Labels (Vue)

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Displays markers on specific geographical coordinates with custom styling and labels. This example uses the 'world_merc' map and defines marker positions, colors, and how labels should be rendered. It requires importing the specific map data.

```vue
<template>
  <vuevectormap
    width="800"
    height="450"
    :options="{
      map: 'world_merc',
      markers: [
        { name: 'Russia', coords: [61, 105] },
        { name: 'Canada', coords: [56, -106] },
        { name: 'Palestine', coords: [31.5, 34.8] },
        { name: 'Brazil', coords: [-14.2350, -51.9253] }
      ],
      markerStyle: {
        initial: { fill: '#ff4551' }
      },
      labels: {
        markers: {
          render: marker => marker.name
        }
      }
    }">
  </vuevectormap>
</template>

<script setup>
import 'jsvectormap/dist/maps/world-merc'
</script>
```

--------------------------------

### Event Handling in VueVectorMap (Vue)

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Attaches event listeners to map interactions using Vue's standard event binding syntax. This example demonstrates handling 'loaded', 'regionTooltipShow', and 'regionClick' events. It includes functions to log event data and handle map resizing for responsiveness.

```vue
<template>
  <vuevectormap
    width="800"
    height="450"
    :options="{
      map: 'world_merc',
      regionStyle: { initial: { fill: '#d1d5db' } }
    }"
    @loaded="onMapLoaded"
    @regionTooltipShow="onRegionTooltipShow"
    @regionClick="onRegionClick">
  </vuevectormap>
</template>

<script setup>
const onMapLoaded = (map) => {
  console.log('Map loaded:', map)
  // Responsive map resize
  window.addEventListener('resize', () => {
    map.updateSize()
  })
}

const onRegionTooltipShow = (tooltip, code) => {
  console.log('Tooltip shown for region:', code)
  console.log('Tooltip element:', tooltip)
}

const onRegionClick = (event, code) => {
  console.log('Region clicked:', code)
}
</script>
```

--------------------------------

### Customize VueVectorMap SCSS Styles

Source: https://github.com/themustafaomar/vuevectormap/blob/next/README.md

Provides an example of how to override default SCSS variables for VueVectorMap when using Sass. This allows for detailed customization of elements like tooltips by importing `jsvectormap` after defining custom variables.

```scss
// Example variables.
$tooltip-bg-color: #3a3d4c;
$tooltip-font-family: Roboto, Etc;

@import 'jsvectormap';
```

--------------------------------

### Initialize VueVectorMap in Vue App

Source: https://github.com/themustafaomar/vuevectormap/blob/next/README.md

Demonstrates how to import and globally configure VueVectorMap in a Vue 3 application. It includes importing the component, its SCSS styles, and a specific map. Global options like `backgroundColor` can be set during initialization.

```javascript
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')
```

--------------------------------

### Basic Map Component Usage (Vue)

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Renders a simple world map with custom dimensions using the vuevectormap component. Minimal configuration is required, and the map automatically renders on component mount. The component accepts width and height props, along with an options object for map configuration.

```vue
<template>
  <div class="map-container">
    <vuevectormap
      width="700"
      height="350"
      :options="{
        map: 'world',
        regionStyle: {
          initial: { fill: '#e4e4e4' }
        }
      }">
    </vuevectormap>
  </div>
</template>

<script setup>
// Map renders automatically on mount
</script>
```

--------------------------------

### VueVectorMap Component Props and Configuration

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Details the configuration options for the VueVectorMap component, including `width`, `height`, and the `options` object. The `options` object encompasses various jsvectormap settings like map type, zoom behavior, tooltips, and styles. It also imports a specific map file.

```vue
<template>
  <vuevectormap
    :width="800"
    :height="450"
    :options="{
      map: 'world_merc',
      backgroundColor: '#a5bfdd',
      zoomButtons: true,
      zoomOnScroll: true,
      zoomMax: 12,
      zoomMin: 1,
      zoomStep: 1.5,
      bindTouchEvents: true,
      selectedRegions: ['US', 'CA'],
      showTooltip: true,
      markers: [],
      lines: [],
      regionStyle: {},
      markerStyle: {},
      lineStyle: {}
    }">
  </vuevectormap>
</template>

<script setup>
import 'jsvectormap/dist/maps/world-merc'
</script>
```

--------------------------------

### Basic VueVectorMap Component Usage

Source: https://github.com/themustafaomar/vuevectormap/blob/next/README.md

Shows how to use the VueVectorMap component within a Vue template. It requires setting `width` and `height` attributes and can accept a `:options` prop for map-specific configurations like markers and styles.

```vue
<template>
  <div class="...">
    <vuevectormap
      width="700"
      height="350"
      :options="{
        // Map options..
        // markers: []
        // markerStyle: {}
        // etc..
      }">
    </vuevectormap>
  </div>
</template>
```

--------------------------------

### SCSS Customization for jsvectormap

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Shows how to customize jsvectormap styles using SCSS variables before importing the library's styles. This method allows for global theme adjustments. It defines variables like `$tooltip-bg-color` and then imports `jsvectormap`.

```scss
// Define custom variables
$tooltip-bg-color: #3a3d4c;
$tooltip-font-family: 'Roboto', sans-serif;
$tooltip-font-size: 14px;
$tooltip-border-radius: 4px;
$tooltip-padding: 8px 12px;

// Import the library styles
@import 'jsvectormap';
```

--------------------------------

### Access Map Instance with Vue Template Refs

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Demonstrates how to access the underlying jsvectormap instance using template refs in Vue. This allows for programmatic control and calling API methods on the map after the component has mounted. It shows accessing the instance via `mapRef.value.map`.

```vue
<template>
  <div>
    <vuevectormap
      ref="mapRef"
      width="800"
      height="450"
      :options="{ map: 'world_merc' }">
    </vuevectormap>

    <button @click="resetMap">Reset Map</button>
    <button @click="addMarker">Add Marker</button>
  </div>
</template>

<script setup>
import { onMounted, shallowRef } from 'vue'

const mapRef = shallowRef()

onMounted(() => {
  // Access the map instance after component is mounted
  setTimeout(() => {
    console.log('Map instance:', mapRef.value.map)
  }, 1000)
})

const resetMap = () => {
  if (mapRef.value?.map) {
    mapRef.value.map.reset()
  }
}

const addMarker = () => {
  if (mapRef.value?.map) {
    mapRef.value.map.addMarkers([
      { name: 'New Location', coords: [40.7128, -74.0060] }
    ])
  }
}
</script>
```

--------------------------------

### Custom Region Styling in VueVectorMap

Source: https://context7.com/themustafaomar/vuevectormap/llms.txt

Illustrates how to apply custom styles to map regions in VueVectorMap. It covers styling for initial, hover, and selected states, as well as defining selected regions. The `regionStyle` object within the `options` prop is used for this purpose.

```vue
<template>
  <vuevectormap
    width="800"
    height="450"
    :options="{
      map: 'world',
      regionStyle: {
        initial: {
          fill: '#d1d5db',
          fillOpacity: 1,
          stroke: '#ffffff',
          strokeWidth: 1,
          strokeOpacity: 1
        },
        hover: {
          fill: '#3b82f6',
          fillOpacity: 0.8,
          cursor: 'pointer'
        },
        selected: {
          fill: '#1e40af'
        },
        selectedHover: {
          fill: '#1e3a8a'
        }
      },
      selectedRegions: ['US', 'CA', 'MX']
    }">
  </vuevectormap>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.