The OpenLayers map doesn’t show if placed within a v-main or v-layout. If I move the v-sheet, which is the element that the map is rendered on, outside of the v-main or v-layout then it works fine.

I tested using both the original OpenLayers library (https://www.npmjs.com/package/ol) and the vue3-openlayers wrapper (https://vue3openlayers.netlify.app/). Both fail to show the map.

Node version: 22.1.0
Npm version: 10.7.0

OpenLayers library:

<template>
  <v-app>
    <v-layout>
      <v-app-bar title="Mysteries Database"></v-app-bar>
      
      <v-navigation-drawer
        expand-on-hover
        rail
      >

        <v-list density="compact" nav>
          <v-list-item prepend-icon="mdi-map" title="Map" value="myfiles"></v-list-item>
          <v-list-item prepend-icon="mdi-account-multiple" title="Test" value="shared"></v-list-item>
          <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
        </v-list>
      </v-navigation-drawer>
      
      <v-main>
        <v-sheet :id="mapElemId" class="map ml-0"></v-sheet>
      </v-main>
    </v-layout>
  </v-app>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Map from 'ol/Map'
import TileLayer from "ol/layer/Tile"
import { View } from "ol"
import { transform } from "ol/proj"
import { OSM } from "ol/source"
 
const map = ref()
const mapElemId = "map-123"

onMounted(async () => {
  map.value = new Map({
      layers: [
          new TileLayer({
              source: new OSM()
          })
      ],
      view: new View({
          center: transform([40, 40], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
      }),
      target: mapElemId ?? 'map'
  })
})
</script>

<style>
.map {
  min-height: 800px !important;
  flex: 1;
  z-index: 9999;
}
</style>

vue3-openlayers wrapper:

<template>
  <v-app>
    <v-layout>
      <v-app-bar title="Application toolar">
        <v-text-field label="Label" variant="outlined" density="compact"></v-text-field>
      </v-app-bar>
      
      <v-navigation-drawer
        expand-on-hover
        rail
      >

        <v-list density="compact" nav>
          <v-list-item prepend-icon="mdi-map" title="Map" value="myfiles"></v-list-item>
          <v-list-item prepend-icon="mdi-account-multiple" title="Test" value="shared"></v-list-item>
          <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
        </v-list>
      </v-navigation-drawer>
      
      <v-main>
        <Map.OlMap style="min-width: 400px; min-height: 400px;">
          <Map.OlView :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
          <Layers.OlTileLayer>
            <Sources.OlSourceOsm />
          </Layers.OlTileLayer>
        </Map.OlMap>
      </v-main>
    </v-layout>
  </v-app>
</template>

<script setup lang="ts">
import { Map, Layers, Sources } from "vue3-openlayers";
</script>

package.json

{
  "name": "Test",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@mdi/font": "6.2.95",
    "ol": "^9.1.0",
    "ol-contextmenu": "^5.4.0",
    "ol-ext": "^4.0.18",
    "roboto-fontface": "*",
    "vue": "^3.4.21",
    "vue3-openlayers": "^8.1.0",
    "vuetify": "^3.5.8"
  },
  "devDependencies": {
    "@babel/types": "^7.24.0",
    "@types/node": "^20.11.25",
    "@vitejs/plugin-vue": "^5.0.4",
    "sass": "^1.71.1",
    "typescript": "^5.4.2",
    "unplugin-fonts": "^1.1.1",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.1.5",
    "vite-plugin-vuetify": "^2.0.3",
    "vue-tsc": "^2.0.6"
  }
}

Thanks!