Overview

This is a memo on how to bring a specified marker to the front in nuxt3-leaflet.

Method

By using the z-index-offset attribute on LMarker as shown below, I was able to bring a specified marker to the front.

<template v-for="marker in markers">
    <LMarker
      @click="selectMarker(marker)"
      :lat-lng="[marker.lat, marker.lng]"
      :z-index-offset="selectedSpotId === marker.id ? 1000 : 0"
    >
      <LTooltip>
        {{ marker.title }}
      </LTooltip>
      <LIcon
        :iconUrl="marker.icon"
        :iconSize="[25, 41]"
        :iconAnchor="[12, 41]"
        :popupAnchor="[1, -34]"
        :tooltipAnchor="[16, -28]"
        shadowUrl="https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png"
        :shadowSize="[41, 41]"
        :shadowAnchor="[12, 41]"
      ></LIcon>
    </LMarker>
  </template>

Summary

I hope this is helpful when using nuxt3-leaflet.