Не получается подключить vue-yandex-map на Nuxt 3

Рейтинг: 2Ответов: 2Опубликовано: 11.08.2023

Всем привет, не могу долгое время решить проблему с подключением vue-yandex-map на Nuxt 3.

Вот как я его пытаюсь подключить:

<yandex-map :settings="settings">
  <ymap-marker marker-id="0" :coords="coords" />
</yandex-map>

<script>
import { yandexMap, ymapMarker } from "vue-yandex-maps";
export default {
  name: "ContactsPage",
  data() {
    return {
      coords: [62.978634, 87.5062],
      settings: {
        apiKey: "",
        lang: "ru_RU",
        coordorder: "latlong",
        enterprise: false,
        version: "2.1",
      },
    };
  },
  components: { yandexMap, ymapMarker },
};
</script>

Вот что мне выдает в консоли:

[Vue warn]: Failed to resolve component: yandex-map                                                                                                                                           1:12:09 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ymap-marker                                                                                                                                          1:12:09 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.                                                                                    1:12:09 AM
[Vue warn]: Component <Anonymous> is missing template or render function.

В package.json у меня стоит "vue-yandex-maps": "^1.1.0". И на vue-2 с подключением не было никаких проблем.

yandex-maps-api vue.js yandex-maps-jsapi nuxt.js
Источник: Stack Overflow на русском

Ответы

▲ 3Принят
  1. Добавляешь новую версию на ts в свой проект
 yarn add vue-yandex-maps@beta.
  1. Создаешь папку plugins (если нет) , там файл, например maps.ts
  2. Туда вставляешь следующее:
    import { defineNuxtPlugin } from '#app'
    import plugin from 'vue-yandex-maps'
    
    
    const settings = {
      apiKey: 'твой ключик', // Индивидуальный ключ API
      // lang: 'ru_RU', // Используемый язык
      // coordorder: 'latlong', // Порядок задания географических координат
      // debug: false, // Режим отладки
      // version: '2.1' // Версия Я.Карт
    }
    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(plugin, settings)
    });
  1. В nuxt.config.ts добавляешь:
plugins: [
        { src: '~/plugins/maps', mode: 'client' },
],
  1. У себя в компоненте прописываешь:
    <client-only>
             <YandexMap
        :coordinates="coordinates"
        :detailed-controls="detailedControls"
        :controls="controls"
        map-type="hybrid"
      />     
    </client-only>
    <script setup>
    import { yandexMap } from 'vue-yandex-maps'
    const coordinates = [55, 33];
    const controls = ['fullscreenControl'];
    const detailedControls = { zoomControl: { position: { right: 10, top: 50 } } };
    </script>
    
    <style>
    .yandex-container {
      height: 400px;
    }
    </style>

тык тык

Вот если что вся необходимая документация , удачи !)

▲ 0

Вот код, который у меня был, и он сработал:

import YandexMap from "vue-yandex-maps";
import { defineNuxtPlugin } from "nuxt/app";

const settings = {
  apiKey: "your_api_key", // Individual API key (developer.tech.yandex.ru)
  lang: "ru_RU",
  // coordorder: 'latlong',
  // debug: false,
  // version: '2.1'
};

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(YandexMap, settings);
});