How to use in Nuxt3?

[jeanscircuits]

Help me to use in Nuxt 3 please.

[ctissier]

I know the question is a bit old, but just in case it helps, I made it work with Nuxt3 this way:

1. Install the dependency

npm install @imengyu/vue3-context-menu

2. Create a plugin to import the Component Globally :

// ~/plugins/vue3-context-menu.ts

import ContextMenu from '@imengyu/vue3-context-menu'
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ContextMenu)
})

3. Implement the Component in your template

<script lang="ts" setup>
   //...
   const contextMenuOptions = ref({})
   //...
   const showMenu = (event: MouseEvent)=>{
        contextMenuOptions.value = {
                zIndex:100,
                x: event.x,
                y: event.y
            }
        }
        menuVisible.value = true
        //event.stopPropagation()
   }
   
   const itemClicked(item){
       //do whatever you want when item is clicked
   } 
   //...
</script>

<template>
   <!-- ... -->
   <Button @click="showMenu" />
   <!-- ... -->
   <ContextMenu v-model:show="menuVisible" :options="contextMenuOptions">
       <ContextMenuItem label="Simple item" @click="itemClicked(1)" />
       <ContextMenuSeparator />
       <ContextMenuGroup label="Menu with child">
          <ContextMenuItem label="Item1" @click="itemClicked(2)"  />
          <ContextMenuItem label="Item2" @click="itemClicked(2)"  />
       </ContextMenuGroup>     
    </ContextMenu>
</template>