Vuetify Labs
Experiment and use in-development components before they’re released.
What is Labs?
Labs is a new way for developers to use unfinished components in an alpha state.
Components available through Labs are considered NOT production ready and only to be used for testing purposes. Breaking changes will be introduced in patch releases and no support will be provided.
Usage
Using a Labs component is as simple as importing from vuetify/labs. The following example shows how to import and bootstrap v-picker in your component:
<template>
<v-picker />
</template>
<script setup>
import { VPicker } from 'vuetify/labs/VPicker'
</script>
Alternatively you can make the component available globally by importing it in your Vuetify plugin file:
import { createVuetify } from 'vuetify'
import { VPicker } from 'vuetify/labs/VPicker'
export default createVuetify({
components: {
VPicker,
},
})
When Vuetify instantiates it will register VPicker as a usable component within templates.
If you wish to install all available Vuetify components use the following code snippet:
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as labsComponents from 'vuetify/labs/components'
export default createVuetify({
components: {
...components,
...labsComponents,
},
})
Available Components
The following is a list of available and up-and-coming components for use with Labs:
| Component | Description | Min Version |
|---|---|---|
| v-color-input | A color input component | vTBD |
| v-date-input | A date input component | v3.6.0 |
| v-pull-to-refresh | A component to update content by screen swipes | v3.6.0 |
| v-stepper-vertical | Vertical version of v-stepper | v3.6.5 |
| v-video | A customizable wrapper for native video element | v3.9.3 |
| v-pie | A component to display data as interactive pie/donut chart | v3.9.3 |
| v-avatar-group | A component to group and display multiple avatars | v3.12.0 |
| v-command-palette | A searchable command palette component | v3.12.0 |
Lab component APIs are NOT finalized and can and will change. You should EXPECT for things to break during the course of development.