Insert context menu in Leaflet map

I want to ask about Vue 3, how to insert a custom context menu in a Leaflet map?
I'm using leaflet@1.9.4, @vue-leaflet/vue-leaflet@0.10.1 and trying to use leaflet-contextmenu@1.4.0.
My code looks like this:

<template>
	<div class="map">
		<l-map ref="map" v-model:zoom="zoom" :center="[49.2265592, 16.5957531]">
			<l-tile-layer
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
				layer-type="base"
				name="OpenStreetMap"
			></l-tile-layer>
		</l-map>
	</div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
// import L from 'leaflet';
// import "leaflet-contextmenu";

export default {
	components: {
		LMap,
		LTileLayer,
	},
	data() {
		return {
			zoom: 13,
		};
	},
};
</script>

What I would like to do is something like:

L.map.contextmenu = true;
L.map.contextmenuItems = [{
	text: 'Show coordinates',
}];

However, I can't figure out how and where to write this.
Any feedback would be appreciated.

Unfortunately I cant tell you much about @vue-leaflet/vue-leaflet directly, since I never used it. However, you said "Any feedback would be appreciated.", so I'd like to present you a slightly different approach.
Usually I include Leaflet directly in my Vue Apps like this:

First I create a ref to my map element - just like you did:

<div ref="mapEl"></div>

Then I get that ref using Vues ref function:

import { ref } from 'vue';
const mapEl = ref();

You can pass the refs value - which contains the HTMLElement - directly in Leaflets constructor. I'm doing this right in the onMounted hook

const map = leaflet.map(mapEl.value, {
    contextmenu: true,
    contextmenuWidth: 140,
    contextmenuItems: [
      {
        text: 'Show coordinates',
        callback: ()=> alert('Coordinates callback')
      }
    ]
});
// Other options you want to apply

Don't forget to import Leaflet and the contextmenu plugin:

import leaflet from 'leaflet';
import 'leaflet-contextmenu';
import 'leaflet-contextmenu/dist/leaflet.contextmenu.min.css';

The full code could look like this:

<template>
  <div ref="mapEl"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import leaflet from 'leaflet';
import 'leaflet-contextmenu';
import 'leaflet-contextmenu/dist/leaflet.contextmenu.min.css';

const mapEl = ref();

onMounted(()=> {
const map = leaflet.map(mapEl.value, {
  contextmenu: true,
  contextmenuWidth: 140,
  contextmenuItems: [
    {
      text: 'Show coordinates',
      callback: ()=> alert('Coordinates callback')
    }
  ]
});
// Other options you want to apply
});
</script>

I hope this will solve your problem. Good luck on your app!

I have figured out how to use leaflet-contextmenu@1.4.0 in @vue-leaflet/vue-leaflet@0.10.1.
The key is passing options (:options="mapOptions") to the leaflet map constructor, which can be done declaratively.
The code is like:

<template>
	<div class="map">
		<l-map ref="map" v-model:zoom="zoom" :center="[49.2265592, 16.5957531]" :options="mapOptions">
			<l-tile-layer
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
				layer-type="base"
				name="OpenStreetMap"
			></l-tile-layer>
		</l-map>
	</div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import 'leaflet-contextmenu';
import 'leaflet-contextmenu/dist/leaflet.contextmenu.min.css';

export default {
	components: {
		LMap,
		LTileLayer,
	},
	data() {
		return {
			zoom: 13,
			mapOptions: {
				contextmenu: true,
				contextmenuWidth: 140,
				contextmenuItems: [
				{
					text: 'Show coordinates',
					callback: ()=> alert('Coordinates callback')
				}
				]
			},
		};
	},
};
</script>

I hope this helps someone else.