Не работает с nuxt.js about vue-yandex-map

[FullZero5]

Все завел проблема была в том что я /plugins/yandexMap.js указал так
import {YmapPlugin} from 'vue-yandex-maps'

[PNKBizz]

Добрый день!
Не могли бы вы прислать выпадающие ошибки?
С нукстом не работал и плагин под него не тестировал, видимо пора начинать )

[alekspetrov]

Консоль выдает:
Uncaught TypeError: Cannot read property 'offsetWidth' of null

[alekspetrov]

Судя по всему это происходит в виду отсутствия ноды карты, когда вызывается скрипт инициализации

[alekspetrov]

Ок, нашел решение.
Это не проблема плагина. Это особенности работы с nuxt.js

/plugins/yandexMap.js (можно назвать как угодно)

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

// Используем плагин только в браузере, на сервере он не работает
if (process.browser) {
  Vue.use(YmapPlugin)
}

/nuxt.config.js

module.exports = {
  // Выносим плагин в отдельный файл при сборке
  build: {
    vendor:  ['vue-yandex-maps']
  },
  // Подключаем плагин
  plugins: ['~/plugins/yandexMap.js']
}

Далее по документации добавляем <yandex-map>

[PNKBizz]

Круто =)

[FullZero5]

alekspetrov, а поподробнее можно, что то не получается подключить в nuxt вроде все как ты описал выше

[alekspetrov]

@FullZero5, что говорит консоль?

[FullZero5]

Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js:4405)
at Object../plugins/yandexMap.js (yandexMap.js:5)
at webpack_require (bootstrap 726d8e6bcadf593b3b17:712)
at fn (bootstrap 726d8e6bcadf593b3b17:117)
at Object../.nuxt/index.js (nuxt.vue:42)
at webpack_require (bootstrap 726d8e6bcadf593b3b17:712)
at fn (bootstrap 726d8e6bcadf593b3b17:117)
at Object../.nuxt/client.js (App.vue:42)
at webpack_require (bootstrap 726d8e6bcadf593b3b17:712)
at fn (bootstrap 726d8e6bcadf593b3b17:117)

[FullZero5]

так import { yandexMap, ymapMarker } from 'vue-yandex-maps'
или так import { yandexMap, ymapMarker } from '~/plugins/yandexMap.js'
index.vue подключать? просто и так и так ошибка

[alekspetrov]

@FullZero5 нет, в самом компоненте его не надо подключать вообще =) nuxt сам его подключит и инициирует как внешний плагин, в этом вся загвоздка и была изначально, что он не может быть отрисован на стороне сервера. И в components: {} его прописывать не нужно. Только в разметке указать его <yandex-map> и его props указать. Сам ~/plugins/yandexMap.js выглядит у меня вот так:

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

if (process.browser) {
  Vue.use(YmapPlugin)
}

[FullZero5]

м ... ну хорошо я создал /plugins/yandexMap.js
потом отредактировал /nuxt.config.js добавил plugins: ['~/plugins/yandexMap.js']
теперь на странице /page/index.vue вставил
yandex-map
:coords="[54.62896654088406, 39.731893822753904]"
zoom="10"
style="width: 600px; height: 600px;"
map-type="hybrid"

но карты нет ? в консоли все таже ошибка

[alekspetrov]

@FullZero5 а vendor добавил в nuxt config?

[FullZero5]

нет

[alekspetrov]

@FullZero5 выше в описании решения есть