SSR - Githubissues

yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS

MIT License

359 stars 103 forks source link

SSR #59

Closed Caspanch closed 6 years ago

Caspanch commented 6 years ago

При использовании SSR, карты не будут работать, если не сделать следующее:

<yandex-map
    v-if="showMap"
    class="ymap"
    :coords="[54.62896654088406, 39.731893822753904]"
></yandex-map>

И в mounted: mounted() { this.showMap = true }

PNKBizz commented 6 years ago

@Caspanch Три месяца работал на проекте, где использовали нативный SSR и эти карты. Проблемы не было. Возможно что-то у вас настроено не правильно.

yusupprog commented 5 years ago

А если я использую не nuxt, а vue-server-renderer, как можно подключить? Сейчас выдает undefined token export

yusupprog commented 5 years ago

Решилл, спасибо

KirillRomanuk commented 5 years ago

Решилл, спасибо

Буду очень признателен, если поделитесь решением)

yusupprog commented 5 years ago

let YmapPlugin;
let Ymap;

if(process.browser){
     YmapPlugin = require('vue-yandex-maps/dist/vue-yandex-maps')
     Ymap = YmapPlugin.yandexMap;
}

evgajukov commented 4 years ago

let YmapPlugin;
let Ymap;

if(process.browser){
     YmapPlugin = require('vue-yandex-maps/dist/vue-yandex-maps')
     Ymap = YmapPlugin.yandexMap;
}

А можно поподробнее как после Ymap использовать?

nikitakuhta commented 4 years ago

У меня аналогичная проблема с Nuxt SSR, как у автора issue. Если не запретить рисовать компонент yandex-map на сервере, то после загрузки вылетает ошибка: Uncaught TypeError: Cannot read property 'offsetWidth' of null Карта при этом на клиенте уже не рисуется.

Если закрыть компонент в <client-only>, или сделать хак с mounted, чтобы компонент рисовался только на фронте, то карта работает. Какие настройки искать - не понял. Nuxt.js v2.12.2, vue-yandex-maps v0.10.7.

KirillOlegovichH commented 1 year ago

<template>
  <q-no-ssr> <!-- Важно -->
        <YaMap />
  </q-no-ssr>
</template>

<script>
   components: {
    YaMap: defineAsyncComponent(() =>
      import('components/modules/YaMap.vue') /* Важно */
    )
  },
</script>