You are viewing Pre-Alpha documentation.
Vuetify0 Logo

useOverflow API

API reference for the useOverflow composable.

Options

container

MaybeRefOrGetter<Element>

Container element to track. Can be a ref, getter, or MaybeRefOrGetter. When provided, useOverflow tracks this element's width automatically.

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

Properties

container

ShallowRef<Element>

Container element ref

width

Readonly<ShallowRef<number>>

Current container width

capacity

ComputedRef<number>

How many items fit in available space

total

ComputedRef<number>

Total width of all measured items

isOverflowing

Readonly<Ref<boolean, boolean>>

Whether items overflow the container

Methods

measure

(index: number, el: Element | undefined) => void

Register an item's element for width measurement

reset

() => void

Clear all measurements


© 2016-2025 Vuetify, LLC
Ctrl+/