meta | related | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Experiment and use in-development components before they're released.
Labs is a new way for developers to use unfinished components in an alpha state.
::: error 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. :::
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,
},
})
The following is a list of available and up-and-coming components for use with Labs:
Component | Description | Min Version |
---|---|---|
v-calendar | A calendar component | v3.4.9 |
v-confirm-edit | A component for confirming model changes | v3.4.0 |
v-date-input | A date input component | v3.6.0 |
v-empty-state | A component for displaying empty states | v3.5.7 |
v-fab | A layout aware v-btn | v3.5.7 |
v-number-input | A component for numerical data | v3.5.10 |
v-snackbar-queue | A queue for snackbars | v3.6.0 |
v-sparkline | A basic data display component | v3.5.5 |
v-speed-dial | A component for display actions | v3.5.8 |
v-time-picker | A time-picker component | v3.5.12 |
v-treeview | A treeview component | v3.5.9 |
::: warning Lab component APIs are NOT finalized and can and will change. You should EXPECT for things to break during the course of development. :::