Vuetify

This is an experimental feature to be used ideally with Vuetify >= 2.6 . Use with caution

Click the image to view it in fullscreen

Vuetify is a popular UI framework amongst vue/nuxt developers. However vuetify 2 & it's corresponding nuxt module @nuxtjs/vuetify is missing type definitions for its components and their slots / props.

Kudra Vuetify

Kudra can generate type definitions for vuetify components by enabling the experimental feature.

1. Enable the experimental option

nuxt.config.ts

import { defineNuxtConfig } from "nuxt-kudra";

export default defineNuxtConfig({
  kudra: {
    experimentalOptions: {
      vuetify: {
        disable: false, // Enabled
      },
    },
  },
});

2. Install `@nuxtjs/vuetify`

npm i -D @nuxtjs/vuetify

yarn add --dev @nuxtjs/vuetify

3. Add Vuetify to tsconfig

tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "types": ["@nuxt/types", "@types/node", "nuxt-kudra", "@nuxtjs/vuetify"]
  },
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Usage