I don't know if it's an vue3-openlayers issue but...

[neocaos]

I'm trying to implement your library into a Quasar (vite) app, and i'm getting some problems to show the map up.

im working with Quasar with Vite, pwa mode, with
Vue3-Openlayers and Pinia as data store.

I'm building an app which uses geojson data and it's necesary to show it in a Map (Openlayers)

Everything seems to work fine when i touch some code (inserting a space ) in Component Setup and vite it's reload so the map is shown properly, but never before.

The Vue structure

The Pinia Store loaded without displaying the map

The page not showing the map

The page showing the map after inserting an space in setup block

The DetailedMap Component is used in CanyonLayout component.

The Pinia Store is populated by calling an async action in onBeforeMount hook on CanyonLayout component

 onBeforeMount(() => {
      leftDrawerOpen.value = false
      canyonStore.loadCanyon(router.currentRoute._value.params.canyonId)
    })

which populates two objects in store:

async loadCanyon(canyonName) {
      let responseNormal = await api.get(`/canyons/${canyonName}`)
      this.currentCanyon = responseNormal.data
      let response = await api.get(`/canyons/${canyonName}?output=geojson`)
      this.geoCanyon = response.data

      return this.currentCanyon
}
    

so we use the loaded data in out child (DetailedMap) component in this way:

const { geoCanyon } = storeToRefs(canyonStore)

const center = ref(canyonStore.geoCanyon.geometry.coordinates)

/*
more unnecesary code
*/

return {
        loading,
        canyon: geoCanyon,
        center,
        projection,
        zoom,
        rotation,
        strokeWidth,
        strokeColor
      }