Skip to content
On this page

Directive: 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.

Released under the MIT License.