slidevjs/slidev · error · Error

[Slidev] Can not identify the source position of the v-drag

Error message

[Slidev] Can not identify the source position of the v-drag element, please provide an explicit `id` prop.

What it means

Thrown by useDragElement when the data source is 'directive' or 'prop' (inline-positioned, not frontmatter) but no markdownSource was provided. Without either a markdown source range or a frontmatter id, the element has no place to read/write its position.

Source

Thrown at packages/client/composables/useDragElements.ts:154

  let dataSource: DragElementDataSource = directive ? 'directive' : 'prop'
  let dragId: string = makeId()
  let pos: number[] | undefined
  if (Array.isArray(posRaw)) {
    pos = posRaw
  }
  else if (typeof posRaw === 'string' && posRaw.includes(',')) {
    pos = posRaw.split(',').map(Number)
  }
  else if (posRaw != null) {
    dataSource = 'frontmatter'
    dragId = `${posRaw}`
    posRaw = frontmatter?.dragPos?.[dragId]
    pos = (posRaw as string)?.split(',').map(Number)
  }

  if (dataSource !== 'frontmatter' && !markdownSource)
    throw new Error('[Slidev] Can not identify the source position of the v-drag element, please provide an explicit `id` prop.')

  const watchStopHandles: WatchStopHandle[] = [stopWatchBounds]

  const autoHeight = !isArrow && posRaw != null && !Number.isFinite(pos?.[3])
  pos ??= [Number.NaN, Number.NaN, 0]
  const width = ref(pos[2])
  const x0 = ref(pos[0] + pos[2] / 2)

  const rotate = ref(isArrow ? 0 : (pos[4] ?? 0))
  const rotateRad = computed(() => rotate.value * Math.PI / 180)
  const rotateSin = computed(() => Math.sin(rotateRad.value))
  const rotateCos = computed(() => Math.cos(rotateRad.value))

  const container = ref<HTMLElement>()
  const bounds = ref({ left: 0, top: 0, width: 0, height: 0 })
  const actualHeight = ref(0)
  function updateBounds() {
    if (!container.value)

View on GitHub (pinned to 0d798ace58)

Solutions

1. Add an explicit id="..." prop so the element uses frontmatter dragPos
2. Pass the markdownSource tuple when invoking useDragElement directly
3. Author the element directly in slides.md so the source range is auto-captured

Example fix

// before
<div v-drag />
// after
<div v-drag id="my-el" />

// when wiring up a v-drag element programmatically
if (!markdownSource && (dataSource === 'directive' || dataSource === 'prop')) {
  // require an id so it becomes frontmatter-backed
  if (!hasId) throw new Error('Provide an id or author the element in slides.md')
}

When it happens

Trigger: Using the v-drag directive or pos="..." prop without an id and outside the normal markdown capture path (e.g. inside a computed/dynamic component, or a custom integration that bypasses the source tracker).

Common situations: Programmatic v-drag usage, wrapping v-drag in a custom component without forwarding source info, or rendering v-drag from a non-markdown source.

Related errors

• [Slidev] VDrag Element ${id} is missing markdown source
• [Slidev] VDrag Element ${id} is not found in the markdown so
• Invalid YAML frontmatter: ${parsed.errors.map(e => e.message

AI-assisted analysis of slidevjs/slidev@0d798ace58 (2026-08-12). Data as JSON: /api/errors/ad79a32471f0cc6c. Report an issue: GitHub.