# Введение

Компонент позволяет без усилий подключить Я.Карты в проект и дает необходимый минимум функционала "из коробки". Однако, вы можете пользоваться всей мощью API Я.Карт (opens new window), обращаясь напрямую к инстансу карты.

# Подключение

Подключите компонент, используя ваш пакетный менеджер

npm install vue-yandex-maps

После этого вы можете определить настройки подключения компонента:

Эти настройки являются опциональными, значения по умолчанию указаны ниже.

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

Теперь вы можете использовать эти настройки при регистрации вашего компонента.

# Регистрация компонента

# Глобальная

import YmapPlugin from 'vue-yandex-maps'

Vue.use(YmapPlugin, settings)

# Локальная

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

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

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

# Nuxt module

Добавьте в директорию plugins файл ymapPlugin.js со следующим содержанием

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

const settings = { ... } // настройки плагина

Vue.use(YmapPlugin, settings);

Добавьте созданный плагин в секцию плагинов файла nuxt.config.js

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

# Ymaps Loader

Если вам нужно использовать глобальную переменную ymaps отдельно от компонента карт (геокодер и др.), просто импортируйте лоадер. Вы можете задать настройки, описанные выше, а также указать параметр debug (по умолчанию - false). Учтите, что функция загрузчика асинхронная.

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

export default {
  async mounted() {
    await loadYmap({ ...settings, debug: true });
    // здесь доступна переменная ymaps
  }
}

# CDN

Вы можете подключить плагин напрямую, используя ссылку https://unpkg.com/vue-yandex-maps (opens new window). Установка будет произведена автоматически при обнаружении Vue JS. Это может быть полезно при использовании Code Pen (opens new window)

Карта →