#Vuetify Labs

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

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:

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:

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: