VListItem API

ads via vuetify

Props

name	type	default
`active`	boolean	undefined
Controls the active state of the item. This is typically used to highlight the component.
`active-class`	string	undefined
The class applied to the component when it matches the current route. Find more information about the active-class prop on the vue-router documentation.
`active-color`	string	undefined
Deprecated, use `color` instead.
`append-avatar`	string	undefined
Appends a v-avatar component after default content in the append slot.
`append-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component after default content in the append slot.
`base-color` New in v3.3.0	string	undefined
Sets the color of component when not focused.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control when in an active state or input-value is true - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page,
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`exact`	boolean	false
Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.
`height`	string \| number	undefined
Sets the height for the component.
`href`	string	undefined
Designates the component as anchor and applies the href attribute.
`index`	number	undefined
The index of the item within the list. Used internally for keyboard navigation and selection.
`lines`	false \| 'one' \| 'two' \| 'three'	false
The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.
`link`	boolean	undefined
Designates that the component is a link. This is automatic when using the href or to prop.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`nav`	boolean	false
Reduces the width v-list-item takes up as well as adding a border radius.
`prepend-avatar`	string	undefined
Prepends a v-avatar component in the prepend slot before default content.
`prepend-gap` New in v3.11.0	string \| number	undefined
Sets the horizontal spacing between prepend slot and the main content. Also affects indent to ensure expected alignment of group children.
`prepend-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component in the prepend slot before default content.
`replace`	boolean	false
Setting replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`slim` New in v3.4.0	boolean	false
Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation.
`subtitle`	string \| number \| boolean	undefined
Specify a subtitle text for the component.
`tabindex`	string \| number	undefined
Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy="track"` to prevent Tab key navigation into items.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string \| number \| boolean	undefined
Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native `title` attribute, that must be set with `v-bind:title.attr` instead.
`to`	string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric	undefined
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
`value`	any	undefined
The value used for selection. Obtained from `v-list`’s `v-model:selected` when the item is selected.
`variant`	'flat' \| 'text' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'text'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click`	[MouseEvent \| KeyboardEvent]
Event that is emitted when the component is clicked.

Slots

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{ subtitle: string | number | boolean }

{ title: string | number | boolean }

`append`
Adds an item inside the input and after input content.
`default`
The default Vue slot.
`prepend`
Adds an item outside the input and before input content.
`subtitle`
Slot for the component’s subtitle content.
`title`
Slot for the component’s title content.

Exposed

(activated: boolean, e: Event) => void

{}

boolean

boolean

boolean

{
  isLink: boolean
  isRouterLink: boolean
  isClickable: boolean
  href: string | undefined
  linkProps: Record<string, string | undefined>
  route: (RouteLocationGeneric & { href: string }) | undefined
  navigate:
    | ((e?: MouseEvent | undefined) => Promise<void | NavigationFailure>)
    | undefined
  isActive?: boolean | undefined
  isExactActive?: boolean | undefined
}

{
  filterable: boolean | (() => boolean)
  hasPrepend: boolean
  updateHasPrepend: (value: boolean) => void
  trackingIndex: number
  navigationStrategy: 'focus' | 'track'
  uid: string
}

{
  children: Map<unknown, unknown[]>
  parents: Map<unknown, unknown>
  disabled: Set<unknown>
  activatable: boolean
  selectable: boolean
  opened: Set<unknown>
  activated: Set<unknown>
  scrollToActive: boolean
  selected: Map<unknown, 'indeterminate' | 'off' | 'on'>
  selectedValues: unknown[]
  itemsRegistration: ItemsRegistrationType
  register: (
    id: unknown,
    parentId: unknown,
    isDisabled: boolean,
    isGroup?: boolean | undefined,
  ) => void
  unregister: (id: unknown) => void
  updateDisabled: (id: unknown, isDisabled: boolean) => void
  open: (id: unknown, value: boolean, event?: Event | undefined) => void
  activate: (id: unknown, value: boolean, event?: Event | undefined) => void
  select: (id: unknown, value: boolean, event?: Event | undefined) => void
  openOnSelect: (id: unknown, value: boolean, event?: Event | undefined) => void
  getPath: (id: unknown) => unknown[]
}

(selected: boolean, e: Event) => void

`activate`
Activate the list item.
`id`
The unique identifier of the list item.
`isActivated`
Check if the list item is activated.
`isGroupActivator`
Check if the list item activates a group.
`isSelected`
Check if the list item is selected.
`link`
Navigation information if list item functions as a link.
`list`
The reference to the parent list component.
`root`
The root nested list component
`select`
Select this list item.

#VListItem API

VListItem API