vuetifyjs/vuetify · error · Error

Missing pagination!

Error message

Missing pagination!

What it means

Thrown by usePagination() when inject(VDataTablePaginationSymbol) is undefined. Pagination state is created by createPagination() and provided by the data-table root.

Source

Thrown at packages/vuetify/src/components/VDataTable/composables/paginate.ts:116

  function prevPage () {
    page.value = clamp(page.value - 1, 1, pageCount.value)
  }

  function setPage (value: number) {
    page.value = clamp(value, 1, pageCount.value)
  }

  const data = { page, itemsPerPage, startIndex, stopIndex, pageCount, itemsLength, nextPage, prevPage, setPage, setItemsPerPage }

  provide(VDataTablePaginationSymbol, data)

  return data
}

export function usePagination () {
  const data = inject(VDataTablePaginationSymbol)

  if (!data) throw new Error('Missing pagination!')

  return data
}

export function usePaginatedItems <T> (options: {
  items: MaybeRefOrGetter<readonly T[]>
  startIndex: Ref<number>
  stopIndex: Ref<number>
  itemsPerPage: Ref<number>
}) {
  const vm = getCurrentInstance('usePaginatedItems')

  const { items, startIndex, stopIndex, itemsPerPage } = options
  const paginatedItems = computed(() => {
    if (itemsPerPage.value <= 0) return toValue(items)

    return toValue(items).slice(startIndex.value, stopIndex.value)
  })

View on GitHub (pinned to 8d153908df)

Solutions

1. Call usePagination() only inside descendants of a VDataTable-family component.
2. For a custom table, run createPagination(...) and provide(VDataTablePaginationSymbol, data).
3. Verify a single Vuetify install so Symbol.for-based keys resolve identically.

Example fix

// before
const { page, setPage } = usePagination()

// after
import { createPagination, VDataTablePaginationSymbol } from 'vuetify/components/VDataTable/composables/paginate'
const data = createPagination(/* props */)
provide(VDataTablePaginationSymbol, data)

import { inject } from 'vue'
import { VDataTablePaginationSymbol } from 'vuetify/components/VDataTable/composables/paginate'
function hasPaginationProvider(): boolean {
  return inject(VDataTablePaginationSymbol, null) != null
}

import { inject } from 'vue'
import { VDataTablePaginationSymbol } from 'vuetify/components/VDataTable/composables/paginate'
function insidePaginatedTable(): boolean {
  return inject(VDataTablePaginationSymbol, null) != null
}

try {
  usePagination()
} catch (e) {
  if (e instanceof Error && /Missing pagination/.test(e.message)) {
    // local pagination fallback
  } else throw e
}

When it happens

Trigger: Calling usePagination() in a component that is not a descendant of a VDataTable-family component that ran createPagination.

Common situations: Using the pagination composable in a custom footer/pager component rendered outside the table, refactoring the table without preserving the provider, or duplicate Vuetify installs.

Related errors

• foo
• Missing group!
• Missing headers!
• Missing selection!
• Missing sort!

AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/e88ea8fbd27c8e18. Report an issue: GitHub.