# Introduction

Important!

This version is deprecated. LTS version here (opens new window)

You can easily plug Yandex map in your project with this custom component and you available minimal part of functionality right now from the "box". However If you want to use full functionality of YandexMap API (opens new window), you need apply to map instance (opens new window) directly.

# Installing

Using npm

npm install vue-yandex-maps

Using yarn

yarn add vue-yandex-maps

After that you can define settings of component:

These settings are optional and below you can see default options:

const settings = {
  apiKey: '',
  suggestApiKey: '',
  lang: 'ru_RU',
  coordorder: 'latlong',
  enterprise: false,
  version: '2.1'
}

At this moment you can use these settings when you will be registration the component.

# Registration

# Global

import YmapPlugin from 'vue-yandex-maps'

Vue.use(YmapPlugin, settings)

# Local

import { yandexMap, ymapMarker } from 'vue-yandex-maps'

export default {
  components: { yandexMap, ymapMarker }
  // other options
}

<yandex-map :settings="settings">
    <!--Markers-->
</yandex-map>

# Nuxt module

Add file ymapPlugin.js into plugins directory.

import Vue from 'vue'
import YmapPlugin from 'vue-yandex-maps'

const settings = { ... } // plugin settings

Vue.use(YmapPlugin, settings);

Add existed plugin in plugin section nuxt.config.js

{
  plugins: [
    { src: '~/plugins/ymapPlugin.js',  mode: 'client' }
  ]
}

# Ymaps Loader

If you need to use global variable ymaps separately from map component (e.g. for geocoder), just import loader. You may to define settings (see above) and debug option (false by default). Note that loader function is asynchronous.

import { loadYmap } from 'vue-yandex-maps'

export default {
  async mounted() {
    await loadYmap({ ...settings, debug: true });
    // here you may use ymaps 
  }
}

# CDN

You can use plugin directly via link https://unpkg.com/vue-yandex-maps (opens new window). The plugin will be install automatically if you use Vue JS. It could be useful when you use Code Pen (opens new window)

Map →