You are currently viewing the documentation for Vuetify 3
Go to Vuetify 2

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:

ComponentDescription
Data tableBasics - Headers - Sorting - Pagination - Filtering - Grouping
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
Virtual scrollUsage
v-virtual-scrollPrimary Component

Up Next

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