useOverflow

A composable for computing how many items fit in a container based on available width, enabling responsive truncation for pagination, breadcrumbs, and similar components.

Copy Page as Markdown

Intermediate89.4% coverageJan 7, 2026

Usage

The useOverflow composable provides reactive container width tracking and capacity calculation. It supports two modes: variable-width (for items with different widths like breadcrumbs) and uniform-width (for same-width items like pagination buttons).

import { useTemplateRef } from 'vue'
import { createOverflow } from '@vuetify/v0'

const containerRef = useTemplateRef('container')

// Pass container as a ref or getter for proper reactive tracking
const overflow = createOverflow({
  container: containerRef,
  gap: 8,
  reserved: 40,
})

// Check capacity
console.log(overflow.capacity.value) // Number of items that fit
console.log(overflow.isOverflowing.value) // true if items exceed container

Architecture

useOverflow uses ResizeObserver to compute container capacity:

API Reference

The following API details are for the useOverflow composable.

Functions

createOverflow

(options?: OverflowOptions) => E

Creates a new overflow context for computing how many items fit in a container.

createOverflowContext

(_options?: OverflowContextOptions) => ContextTrinity<E>

Creates an overflow context with dependency injection support.

useOverflow

(namespace?: string) => E

Returns the current overflow context from dependency injection.

Options

container

MaybeRefOrGetter<Element>

Container element to track. Can be a ref, getter, or MaybeRefOrGetter. When provided, useOverflow tracks this element's width automatically. Accepts null for compatibility with Vue's useTemplateRef.

gap

MaybeRefOrGetter<number>

Gap between items in pixels

reserved

MaybeRefOrGetter<number>

Reserved space in pixels (for nav buttons, ellipsis, etc)

itemWidth

MaybeRefOrGetter<number>

Uniform item width in pixels. When provided, enables uniform mode where capacity is calculated as available space / itemWidth. Use this for same-width items like pagination buttons.

reverse

MaybeRefOrGetter<boolean>

Calculate capacity from end instead of start. Useful for breadcrumbs where trailing items take priority. Only affects variable mode (uniform mode capacity is direction-independent).