vuetifyjs/vuetify · error · Error

Missing sort!

Error message

Missing sort!

What it means

Thrown by useSort() when inject(VDataTableSortSymbol) is undefined. Sort state is created by createSort() and provided by the data-table root.

Source

Thrown at packages/vuetify/src/components/VDataTable/composables/sort.ts:140

    sortBy.value = newSortBy
    if (page) page.value = 1
  }

  function isSorted (column: InternalDataTableHeader) {
    return !!sortBy.value.find(item => item.key === column.key)
  }

  const data = { sortBy, toggleSort, isSorted }

  provide(VDataTableSortSymbol, data)

  return data
}

export function useSort () {
  const data = inject(VDataTableSortSymbol)

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

  return data
}

// TODO: abstract into project composable
export function useSortedItems<T extends InternalItem> (
  props: {
    customKeySort: Record<string, DataTableCompareFunction> | undefined
  },
  items: Ref<T[]>,
  sortBy: Ref<readonly SortItem[]>,
  options?: {
    transform?: (item: T) => {}
    sortFunctions?: Ref<Record<string, DataTableCompareFunction> | undefined>
    sortRawFunctions?: Ref<Record<string, DataTableCompareFunction> | undefined>
  },
) {
  const locale = useLocale()

View on GitHub (pinned to 8d153908df)

Solutions

1. Call useSort() only inside descendants of a VDataTable-family component.
2. For a custom table, run createSort(...) and provide(VDataTableSortSymbol, data).
3. Ensure a single Vuetify install so the symbol resolves identically.

Example fix

// before
const { toggleSort } = useSort()

// after
import { createSort, VDataTableSortSymbol } from 'vuetify/components/VDataTable/composables/sort'
const data = createSort(/* props */, /* emit */)
provide(VDataTableSortSymbol, data)

import { inject } from 'vue'
import { VDataTableSortSymbol } from 'vuetify/components/VDataTable/composables/sort'
function hasSortProvider(): boolean {
  return inject(VDataTableSortSymbol, null) != null
}

import { inject } from 'vue'
import { VDataTableSortSymbol } from 'vuetify/components/VDataTable/composables/sort'
function insideSortableTable(): boolean {
  return inject(VDataTableSortSymbol, null) != null
}

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

When it happens

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

Common situations: Building a custom sortable header component outside the table, using the sort composable standalone, or duplicate Vuetify installs.

Related errors

• foo
• Missing group!
• Missing headers!
• Missing pagination!
• Missing selection!

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