Version:

Install ​

shell
npm i @mate-vue/context-menu

Import ​

vue
<script setup>
import { MateContextMenu } from '@mate-vue/context-menu';
</script>

Variants ​

Default ​

vue
<template>
  <MateContextMenu :items="[{text: 'Bearbeiten'}, {text: 'Kopieren'}, {text: 'Löschen'}]">
    <p>Rechtsklick zum Öffnen des Kontextmenüs</p>
  </MateContextMenu>
</template>

With Sub Menu ​

vue
<template>
  <MateContextMenu :items="[{text: 'Erstellen'}, {text: 'Exportieren', children: [{text: 'Als PDF'}, {text: 'Als Excel'}]}, {text: 'Löschen'}]">
    <p>Rechtsklick für Menü mit Untermenü</p>
  </MateContextMenu>
</template>

With Disabled Item ​

vue
<template>
  <MateContextMenu :items="[{text: 'Bearbeiten'}, {text: 'Löschen', disabled: true}]">
    <p>Rechtsklick für Menü</p>
  </MateContextMenu>
</template>