Vuetify Labs

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

What is Labs? { id=what-is-labs }

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. :::

Usage

Using a Labs component is as simple as importing from vuetify/labs. The following example shows how to import and bootstrap v-month-picker in your component:

<template>
  <v-month-picker />
</template>

<script setup>
  import { VMonthPicker } from 'vuetify/labs/VMonthPicker'
</script>

Alternatively you can make the component available globally by importing it in your Vuetify plugin file:

import { createVuetify } from 'vuetify'
import { VMonthPicker } from 'vuetify/labs/VMonthPicker'

export default createVuetify({
  components: {
    VMonthPicker,
  },
})

When Vuetify instantiates it will register VMonthPicker 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:

::: warning Lab component APIs are NOT finalized and can and will change. You should EXPECT for things to break during the course of development. :::