createOverflow

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 Markdown

Intermediate89.4% coverageFeb 18, 2026

Usage

The createOverflow 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).

vue

<script setup lang="ts">
  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
</script>

<template>
  <div ref="container">
    <!-- Items go here -->
  </div>
</template>

Architecture

createOverflow uses ResizeObserver to compute container capacity:

Reactivity

Property/Method	Reactive	Notes
`container`		ShallowRef, assign element for tracking
`width`		ShallowRef, readonly (from ResizeObserver)
`capacity`		Computed from width and measurements
`total`		Computed, sum of all item widths
`isOverflowing`		Computed from total vs available width
`gap`		Accepts MaybeRefOrGetter
`reserved`		Accepts MaybeRefOrGetter
`itemWidth`		Accepts MaybeRefOrGetter (uniform mode)

API Reference

The following API details are for the createOverflow 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 | null | undefined>

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> | undefined

Gap between items in pixels

reserved

MaybeRefOrGetter<number> | undefined

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

itemWidth

MaybeRefOrGetter<number> | undefined

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> | undefined

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).