BlogPlaygroundOne

Vuetify Labs

Experiment and use in-development components before they’re released.

Edit this page
Copy Page as Markdown

What is Labs?

Labs is a new way for developers to use unfinished components in an alpha state.

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:

src/plugins/vuetify.js
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:

src/plugins/vuetify.js
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:

ComponentDescriptionMin Version
v-color-inputA color input componentvTBD
v-date-inputA date input componentv3.6.0
v-pull-to-refreshA component to update content by screen swipesv3.6.0
v-stepper-verticalVertical version of v-stepperv3.6.5
v-videoA customizable wrapper for native video elementv3.9.3
v-pieA component to display data as interactive pie/donut chartv3.9.3
v-avatar-groupA component to group and display multiple avatarsv3.12.0
v-command-paletteA searchable command palette componentv3.12.0

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.