Vue3 - this.map has no pm object

[liuyd-own]

How to use this plug-in in vue3？

[Falke-Design]

Doesn't it work the same as in vue2? #1257

[ByMykel]

@liuyd-own

Vue 3 Composition API

<script setup lang="ts">
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

import { onMounted } from "vue";

onMounted(() => {
  const map = L.map("map").setView([51.505, -0.09], 13);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
  }).addTo(map);

  map.pm.addControls({ position: "topleft" });
});
</script>

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>

Vue 3 Options API

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

export default {
  mounted() {
    const map = L.map("map").setView([51.505, -0.09], 13);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
    }).addTo(map);
  
    map.pm.addControls({ position: "topleft" });  
  }
}
</script>

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>