contextmenuDirective: v-contextmenu
Except Component and Hook usage, you can also use v-contextMenu directive to do the same thing.
TOC
Used in templates
Just import it, and add v-contextMenu to the Element you want.
vue
<script setup>
import { vContextMenu } from '@contextmenu/vue'
</script>
<template>
<div v-contextMenu>
place context menu content here.
</div>
</template>
With options
Pass options same as useContextMenu.
vue
<script setup>
import { vContextMenu } from '@contextmenu/vue'
import { ref } from 'vue'
const targetRef = ref(null)
</script>
<template>
<div ref="target">
right click on me.
</div>
<div v-contextMenu="{ target: targetRef }">
place context menu content here.
</div>
</template>
You can also customize the name if you think it's too long.
NOTICE
The directive name should alway start with v
vue
<script setup>
import { vContextMenu as vCtx } from '@contextmenu/vue'
</script>
<template>
<div v-ctx>
place context menu content here.
</div>
</template>
Used globally
Register the vContextMenu directive in your main.ts / main.js App entry file, then you can use it same as template usage.
Caveat
You will lose TypeScript hints with global usage.
ts
import { createApp } from 'vue'
import { vContextMenu } from '@contextmenu/vue'
import App from './App.vue'
// <div v-contextMenu>menu</div>
createApp(App)
.directive('contextMenu', vContextMenu)
.mount('#app')
Please refer to Vue directive for more details.