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.

Usage

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

<template>
  <v-data-table />
</template>

<script setup>
  import { VDataTable } from 'vuetify/labs/VDataTable'
</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 { VDataTable } from 'vuetify/labs/VDataTable'

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

When Vuetify instantiates it will register VDataTable 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
Bottom sheetUsagev3.3.0 (Icarus)
v-bottom-sheetPrimary Component
Data iteratorsUsagev3.3.0 (Icarus)
v-data-iteratorPrimary Component
Data tableBasics- Headers- Sorting- Pagination- Filtering- Groupingv3.1.0 (Valkyrie)
v-data-tablePrimary Component
v-data-table-serverData table component for handling data from a remote server
v-data-table-virtualData table component for handling large amounts of rows
v-data-table-rowData table reusable row component
v-data-table-rowsData table reusable rows component
v-data-table-columnData table reusable column component
DatesUsagev3.2.0 (Orion)
useDateThe date composable is used by components that require date functionality
Date pickerUsagev3.3.4 (Icarus)
v-date-pickerPrimary Component
Infinite scrollUsagev3.2.0 (Orion)
v-infinite-scrollPrimary Component
OTP inputUsagev3.3.11 (Icarus)
v-otp-inputPrimary Component
Skeleton loaderUsagev3.2.0 (Orion)
v-skeleton-loaderPrimary Component
SteppersUsagev3.3.11 (Icarus)
v-stepperPrimary Component
v-stepper-headerContainer for stepper items
v-stepper-itemPrimary Component
v-stepper-windowWindow container for stepper window items
v-stepper-window-itemItems for stepper window

Up Next

ComponentRelease Target
v-calendarQ1 Q2 Soon™️ 2023

Ready for more?

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