ContextMenu - Nuxt UI

Usage

Right click here

<script setup>const { x, y } = useMouse()const { y: windowY } = useWindowScroll()const isOpen = ref(false)const virtualElement = ref({ getBoundingClientRect: () => ({}) })function onContextMenu () {  const top = unref(y) - unref(windowY)  const left = unref(x)  virtualElement.value.getBoundingClientRect = () => ({    width: 0,    height: 0,    top,    left  })  isOpen.value = true}</script><template>  <div class="w-full" @contextmenu.prevent="onContextMenu">    <Placeholder class="h-96 select-none w-full flex items-center justify-center">      Right click here    </Placeholder>    <UContextMenu v-model="isOpen" :virtual-element="virtualElement">      <div class="p-4">        Menu      </div>    </UContextMenu>  </div></template>

Props

virtualElementrequired

Record<string, any>

any

undefined

popper

{}

{}

modelValue

boolean

false

Preset

{  "wrapper": "relative",  "container": "z-20",  "width": "",  "background": "bg-white dark:bg-gray-900",  "shadow": "shadow-lg",  "rounded": "rounded-md",  "ring": "ring-1 ring-gray-200 dark:ring-gray-800",  "base": "overflow-hidden focus:outline-none",  "transition": {    "enterActiveClass": "transition ease-out duration-200",    "enterFromClass": "opacity-0 translate-y-1",    "enterToClass": "opacity-100 translate-y-0",    "leaveActiveClass": "transition ease-in duration-150",    "leaveFromClass": "opacity-100 translate-y-0",    "leaveToClass": "opacity-0 translate-y-1"  },  "popper": {    "placement": "bottom-start",    "scroll": false  }}

Tooltip

Display content that appears on hover next to an element.

Notification

Display a toast notification in your app.