I am currently working on 2 different projects in Vue 3 that involve utilizing vue yandex maps:
First project:
You can view a demo of the first project where Vue Yandex Maps is being used by clicking here. In this project, the package is registered as follows:
Code snippet from main.js where vue-yandex-maps components are registered:
const { createApp } = require('vue');
import App from './App.vue';
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js';
const app = createApp(App);
app.config.isCustomElement = (tag) => tag.startsWith('y'); // <= This line does not work.
app.use(ymapPlugin);
app.mount('#app');
Code snippet from MapComponent.vue where the vue-yandex-maps package is utilized:
<template>
<yandex-map :coords="coords">
<ymap-marker
marker-id="123"
:coords="coords"
:marker-events="['click']"
></ymap-marker>
</yandex-map>
</template>
<script>
export default {
name: 'MapComponent',
setup() {
return {
coords: [54, 39],
};
},
};
</script>
Code snippet from App.vue where the component MapComponent is used:
<template>
<div id="app">
<MapComponent />
</div>
</template>
<script>
import MapComponent from './components/MapComponent.vue';
export default {
name: 'App',
components: {
MapComponent,
},
};
</script>
Second project:
In the second project, a new feature called defineCustomElement from Vue version 3.2 was used and an error message was encountered when incorporating the vue-yandex-maps package:
Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')
Code snippet from main.js where vue-yandex-maps components are registered using the new feature:
import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
import store from './store'
import router from './router'
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js'
customElements.define(
'app-root',
defineCustomElement(App, {
plugins: [store, router, ymapPlugin],
})
)
Code snippet from defineCustomElementWithStyles.js:
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'
// Code for defining custom elements with styles
// More code here....
Question:
Can you help identify the source of the error in the second project where I am using vue-yandex-maps with defineCustomElement?