Как настроить яндекс карту на nuxt4?

Question

[Алексей Абакумов]

Всем привет, пытаюсь настроить карту на nuxt 4, пытался через создание плагина

import { VueYandexMaps } from 'vue-yandex-maps'
import type { Plugin } from 'vue'

export default defineNuxtPlugin((nuxtApp) => {
    console.log('✅ vue-yandex-maps plugin loaded')

    nuxtApp.vueApp.use(
        VueYandexMaps as unknown as Plugin,
        {
            apikey: 'ключ',
            lang: 'ru_RU',
            coordorder: 'latlong',
            version: '2.1'
        }
    )
})

, и через прописывание модуля в конфиге

modules: [
        'vue-yandex-maps/nuxt'
    ],

рендерю карту в Clientonly, хз ничего не получается, может есть у кого конфиг нормальный, или порядок действий.

Answer 1

[Dimox]

Плагин не нужен.

1. Вынести ключ в nuxt.config.ts, модуль оставить:

modules: [
  'vue-yandex-maps/nuxt',
],
yandexMaps: {
  apikey: '...',
},

2. В компоненте с картой импортировать нужные компоненты и типы при необходимости:

import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapDefaultFeaturesLayer } from 'vue-yandex-maps'
import type { YMap, YMapMarkerProps, LngLat, LngLatBounds } from '@yandex/ymaps3-types'

3. Вывод карты:

<YandexMap
  :settings="{
    location: {
      center: [37.617644, 55.755819],
      zoom: 9,
    },
  }"
  width="100%"
  height="500px"
>
  <YandexMapDefaultSchemeLayer />
  <YandexMapDefaultFeaturesLayer />
</YandexMap>

4. Ну и смотреть документацию, там есть много примеров - https://yandex-maps-unofficial.github.io/vue-yande...

Clientonly я не использовал.