Lab Components

The module provides support to use Vuetify labs components via vuetifyOptions.labsComponents module option, it has been declared properly to have better DX.

You can register all the lab components or only the ones you need: check the lab component definition.

Examples

Registering all the lab components

Example registering all the Vuetify lab components:

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: true
    }
  }
})

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: true
    }
  }
})

Registering single lab component

Example registering a single Vuetify lab component, use singular name or array notation:

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: 'VDataTable' // or ['VDataTable']
    }
  }
})

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: 'VDataTable' // or ['VDataTable']
    }
  }
})

Registering multiple lab components

Example registering multiple Vuetify lab components, use array notation:

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: ['VDataTable', 'VDatePicker']
    }
  }
})

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: ['VDataTable', 'VDatePicker']
    }
  }
})