Configure Context Menu

Environment: client

This setup function will only run on client side. Make sure the browser compatibility when importing packages.

Customize the context menu items in Slidev.

Create ./setup/context-menu.ts with the following content:

import { useNav } from '@slidev/client'
import { defineContextMenuSetup } from '@slidev/types'
import { computed } from 'vue'
import Icon3DCursor from '~icons/carbon/3d-cursor'

export default defineContextMenuSetup((items) => {
  const { isPresenter } = useNav()
  return computed(() => [
    ...items.value,
    {
      small: false,
      icon: Icon3DCursor, // if `small` is `true`, only the icon is shown
      label: 'Custom Menu Item', // or a Vue component
      action() {
        alert('Custom Menu Item Clicked!')
      },
      disabled: isPresenter.value,
    },
  ])
})

This will append a new menu item to the context menu.

To disable context menu globally, set contextMenu to false in the frontmatter. contextMenu can also be set to dev or build to only enable the context menu in development or build mode.