@Ivan_Dobrov

Как правильно импортировать плагин во vue3?

У Яндекс карт есть vue либа "vue-yandex-maps".
Есть возможность получить доступ ко всему функционалу ymaps.
import { loadYmap } from 'vue-yandex-maps';

export default {
  async mounted() {
    const settings = { lang: 'en_US' };
    await loadYmap(settings);
    console.log(ymaps); // здесь доступен весь функционал ymaps
  },
};


Но дальше из доки API по постройке тепловой карты, нужен плагин

Что бы дальше использовать:
ymaps.ready(['Heatmap']).then(async function init() {

      let myMap = new ymaps.Map('map', {
        center: [50.75532267470481, 4.6102387685483555],
        zoom: 11,
        controls: []
      });
.......


Если я просто скачаю плагин, открою и вставлю весь код из него перед ymaps.ready, то все работает и отображается - но это не правильно же.
Если весь код плагина помещаю в файл js и потом делаю import "/plugins/heatmap.js", то мне выдает ошибку:
Uncaught ReferenceError: ymaps is not defined
    <anonymous> heatmap.js:1
    js app.js:40
    __webpack_require__ app.js:156
    fn app.js:390
    <anonymous> index.js:5
    js app.js:19
    __webpack_require__ app.js:156
    fn app.js:390
    <anonymous> App.vue:5
    js app.js:84
    __webpack_require__ app.js:156
    fn app.js:390
    <anonymous> App.vue:3
    vue app.js:73
    __webpack_require__ app.js:156
    fn app.js:390
    <anonymous> main.js:3
    js app.js:51
    __webpack_require__ app.js:156
    __webpack_exports__ app.js:1278
    O app.js:202
    <anonymous> app.js:1279
    <anonymous> app.js:1281

В самом плагине уже используется ymaps, но когда он импортируется, то ymaps еще существует же и соответственно отобразить не может.
Вот и вопрос как правильно импортировать и использовать плагин?
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы