Setup

Installation

Add the following dependencies to your project

npm install nuxt-kudra

yarn add nuxt-kudra

npm install -D @nuxt/typescript-build @nuxt/types @vue/runtime-dom

yarn add --dev @nuxt/typescript-build @nuxt/types @vue/runtime-dom

Then, add nuxt-kudra to the buildModules section of nuxt.config.ts:

{
  buildModules: ["@nuxt/typescript-build", "nuxt-kudra"],
  kudra: {
    // Options
  },
  components: true, // Required if you want kudra to generate component types
}

Ts Config

Insure the following fields are defined in your tsconfig

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

Volar

Insure that you have downloaded Volar for vscode & have enabled takeover mode.

Start The Server

You can now start the dev server and expect kudra to successfully generate your projects types in the outputFolder (defaults to kudra).

If vscode doesn't immediately pickup on your types, try restarting the vue server by pressing CTRL+ SHIFT + P and running Volar: Restart Vue Server

npm run dev

Nuxt Config (Optional)

If you prefer a cleaner type safe way to define your nuxt config, you can use the defineNuxtConfig function exported by kudra in your nuxt.config.ts file.

import { defineNuxtConfig } from "nuxt-kudra";

export default defineNuxtConfig({
  components: true,
  buildModules: ["@nuxt/typescript-build", "nuxt-kudra"],
  kudra: {
    // options
  },
});