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.

DANGER

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-calendar	A calendar component	v3.4.9
v-date-input	A date input component	v3.6.0
v-number-input	A component for numerical data	v3.5.10
v-snackbar-queue	A queue for snackbars	v3.6.0
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.