Vue Component Development Kit

# API Reference

# Autocomplete

# Tooltip

# List

The List component allows you to render an indefinetely long list of items. Under the hood List uses InifiniteScroll. This means that much of what applies to InifiniteScroll also applies to List. You can think of List´ as a high–level version ofInifiniteScroll`.

# ModalOverlay

# ListItem

The ListItem component is used within the List component to render a single item.

# InfiniteScroll

The InfiniteScroll component expects you to do tell it two things at a minimum:

  • What to render:: You do this by setting the items-prop. The items should be an array of objects with an id-field.
  • How to render a single item: You do this by providing the scoped default slot. By default, InfiniteScroll expects the items-array to contain objects that have a least an id-property. You can override this by setting the keyField-prop.

Slot Props

The default slot you have to provide receives several slot-props:

  • item: The item that should be rendered
  • index: The index (type: Number) of the item
  • active: A boolean value that is true the item is currently active. An item is considered active when it is currently beeing positioned by the virtualization library (opens new window) that is used under the hood.

# InfiniteScrollItem

The InfiniteScrollItem component is used within the InfiniteScroll component to render a single item.

# ScrollContainer

A component to conveniently create scrolling HTML elements.

A component that can be used to render links to internal routes or external resources. Depends on Vue Router (opens new window)

# bodySizeMode

You can use the Popover component to render popovers with any kind of content.

# ClientOnly

A component to wrap non SSR friendly components/markup. You can provide a placeholder text that will be shown until the component has been mounted. Alternatively you can also provide a placeholder-slot. The slot is useful if you want to render something other than text – like a loading indicator.

# FocusTrap

A component that creates a focus trap around the wrapped element/component. By default a focus trap is deactive. A deactivated focus trap is not doing anything – except rendering its default slot. You activate a focus trap by setting the active-prop to true. You may deactivate the focus tras at any time by setting the value of active to false.

Playground