Error: Could not resolve Map in Nuxt 3

[timgoeller]

For some reason, the provide/inject of the Map seems to be broken in Nuxt 3. It might be, because provide is called in a onMounted-hook. This causes (for example) a VControlFullscreen inserted into the VMap to produce the Error: Could not resolve Map error message when trying to inject the Map.

A temporary fix for me is to put a ref on the VMap and load the components once the ref is initialized, like so:

<template>
  <VMap
    ref="vmap"
  >
    <VControlFullscreen if="mounted"></VControlFullscreen>
  </VMap>
</template>

<script setup>
import { VMap, VControlFullscreen } from 'v-mapbox';

const vmap = ref(null)
const mounted = ref(false)

watch(vmap, () => {
  mounted.value = true
})
</script>