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 the v-data-table component with your Vuetify instance:

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. This also allows you to define Global Default properties.

The following example configures the default values for the fixedHeader and noDataText props:

src/plugins/vuetify.js
import { createVuetify } from 'vuetify'
import { VDataTable } from 'vuetify/labs/VDataTable'

export default createVuetify({
  components: {
    VDataTable,
  }
  defaults: {
    VDataTable: {
      fixedHeader: true,
      noDataText: 'Results not found',
    },
  },
})

If you wish to install all Labs components, use the following code snippet:

src/plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as labs from 'vuetify/labs/components'

export default createVuetify({
  components: {
    ...labs,
  }
})

Available Components

The following is a list of available and up-and-coming components for use with Labs:

Data Table

ComponentDescription
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-row
v-data-table-rows
v-data-table-column

Up Next

ComponentRelease Target
v-date-pickerQ2 2023
v-calendarQ1 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