Не отображается карта во Vue 3.0.0

[eldargazizov]

Прошу прощения. Может я не так что то делаю, в программировании новичок. Не пинайте сильно))
Делаю все по инструкции, но получаю ошибки.

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function 
  at <YandexMap coords= (2) [36.696259, 34.452574] zoom=10 > 
  at <MapsObjects onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <YandexMap coords= (2) [36.696259, 34.452574] zoom=10 > 
  at <MapsObjects onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

vue-yandex-maps.esm.js?f5ce:1 Uncaught (in promise) TypeError: e is not a function

Maps.vue

<template>
    <yandex-map :coords="coords" :zoom="10" >
        <ymap-marker :coords="coords" marker-id="123" hint-content="some hint" />
    </yandex-map>

</template>

<script>
    import {yandexMap, ymapMarker } from "vue-yandex-maps";

    const settings = {
        apiKey: "cd38a715-a2ba-4c42-9103-83b76b5dc0b0",
        lang: "ru_RU",
        coordorder: "latlong",
        version: "2.1"
    };
    export default {
        name: "MapsObjects",
        components: {yandexMap, ymapMarker},
        data() {
            return {
                settings: settings,
                coords: [
                    36.696259,
                    34.452574
            ],
            };
        }
    };
</script>

App.vue

<template>
    <div>
        <Navbar/>

        <div class="d-flex justify-content-center m-4 " v-bind:class="{'visually-hidden': $store.state.isLoading }">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>


        <div class="container pt-3">
            <router-view/>
        </div>

    </div>
</template>

<script>
    import axios from "axios";
    import Navbar from "@/components/layout/Navbar";

    export default {
        name: "App",
        components: {
            Navbar
        }
    };
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import axios from 'axios'


axios.defaults.baseURL = 'http://127.0.0.1:8000'

createApp(App).use(store).use(router, axios).mount('#app')

packege.json

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.0-beta3",
    "bootstrap-icons": "^1.5.0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-currency-input": "^2.0.0",
    "vue-router": "^4.0.0-0",
    "vue-yandex-maps": "^0.10.12",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}

[mravathar]

Такая же ошибка. Тоже новичок :)

[PNKBizz]

Постараюсь в ближайшее время исправить совместимость с Vue 3

[eldargazizov]

Такая же ошибка. Тоже новичок :)

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js
Выше него вроде не работает.
на примерах https://vue-yandex-maps.github.io/examples
работает, но когда я меняю на версии выше 2.6.14 не работает.
Может поддержка только 2ой версии?

[eldargazizov]

Ждем ответа от разработчиков

[eldargazizov]

Ждем ответа от разработчиков

[PNKBizz]

Спасибо, возьму в приоритете

[Brizhanev]

Спасибо, возьму в приоритете

Привет, планируется ли в ближайшее время версия под VueJS 3?

[PNKBizz]

Планируется, но сроков назвать не могу, к сожалению.

[eldargazizov]

Спасибо, будем ждать

[Donnevtis]

Я попробовал сделать минимальные изменения для миграции на Vue 3:

• импортировал утилиту h из библиотеки vue
• убрал объект карты myMap и список маркеров markers из реактивных данных vue (кстати, зачем они там?)
• зарегистрировал все события в поле emits
• переименовал beforeDestroy на beforeUnmount
• "распрямил" объекты атрибутов в узлах рендер-функции
• так же, в рендер функции заменил массив с содержимым слота на вызов слота
• в методе defineMarker исправил this.$slots.balloon[0].elm.outerHTML на this.$slots.balloon()[0].el.outerHTML

Вроде всё. Проверил на всех примерах из документации, все работают.
Может эта информация пригодится для дальнейшей разработки

[PNKBizz]

Исправлено в v 0.11

[PNKBizz]

npm install vue-yandex-maps@next

[Flashantik]

npm install vue-yandex-maps@next

"vue-yandex-maps": "^0.12.3" but error still is

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of render function 
 at <YandexMap coords= (2) [55.751244, 37.618423] > 
 at <ClientOnly> 
 at <Map> 
 at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > key="/" > 
 at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
 at <Transition name="page" mode="out-in" > 
 at <RouterView name=undefined route=undefined > 
 at <NuxtPage> 
 at <App key=1 > 
 at <NuxtRoot>

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
 at <YandexMap coords= (2) [55.751244, 37.618423] > 
 at <ClientOnly> 
 at <Map> 
 at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > key="/" > 
 at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
 at <Transition name="page" mode="out-in" > 
 at <RouterView name=undefined route=undefined > 
 at <NuxtPage> 
 at <App key=1 > 
 at <NuxtRoot>

vue-yandex-maps.esm.js:1 Uncaught (in promise) TypeError: this.$slots.default is not a function
   at Proxy.render (vue-yandex-maps.esm.js:1:11099)
   at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
   at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5651:34)
   at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
   at instance.update (runtime-core.esm-bundler.js:5694:56)
   at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
   at flushJobs (runtime-core.esm-bundler.js:396:17)

[UvAlex1990]

На этом плагине возможно отобразить ПАНОРАМНУЮ версию ?

[PNKBizz]

@UvAlex1990 Насколько я понимаю, панорамы - это отдельная функциональность ymap

[UvAlex1990]

Как бы подключить эту ПАНОРАМУ в том же компонентенте, что и плагин "vue-yandex-maps" ?