Не работает с nuxt.js

[alekspetrov]

Благодарю за замечательный плагин, но обнаружилась проблема, плагин не работает с nuxt.js.

[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 выше в описании решения есть

[FullZero5]

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