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.
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 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:
Component | Description |
---|---|
Data table | Basics - Headers - Sorting - Pagination - Filtering - Grouping |
v-data-table | Primary Component |
v-data-table-server | Data table component for handling data from a remote server |
v-data-table-virtual | Data table component for handling large amounts of rows |
v-data-table-row | Data table reusable row component |
v-data-table-rows | Data table reusable rows component |
v-data-table-column | Data table reusable column component |
Virtual scroll | Usage |
v-virtual-scroll | Primary Component |
Up Next
Component | Release Target |
---|---|
v-calendar | Q1 2023 |
v-infinite-scroll | Q1 2023 |
v-date-picker | Q2 2023 |
Lab component APIs are NOT finalized and can and will change. You should EXPECT for things to break during the course of development.