TypeScript · Nuxt Concepts

Type-checking

By default, Nuxt doesn't check types when you run nuxi dev or nuxi build, for performance reasons.

To enable type-checking at build or development time, install vue-tsc and typescript as development dependency:

You may experience issues with the latest vue-tsc and vite-plugin-checker, used internally when type checking. For now, you may need to stay on v1 of vue-tsc, and follow these upstream issues for updates: fi3ework/vite-plugin-checker#306 and vuejs/language-tools#3969.

yarn add --dev vue-tsc@^1 typescript

Then, run nuxi typecheck command to check your types:

Terminal

npx nuxi typecheck

To enable type-checking at build time, you can also use the typescript.typeCheck option in your nuxt.config file:

nuxt.config.ts

export default defineNuxtConfig
({
  typescript
: {
    typeCheck
: true
  }
})

Auto-generated Types

When you run nuxi dev or nuxi build, Nuxt generates the following files for IDE type support (and type checking):

`.nuxt/nuxt.d.ts`

This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognize these types automatically.

Some of the references in the file are to files that are only generated within your buildDir (.nuxt) and therefore for full typings, you will need to run nuxi dev or nuxi build.

`.nuxt/tsconfig.json`

This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like ~/file or #build/file.

Watch a video from Daniel Roe explaining built-in Nuxt aliases.

Nitro also auto-generates types for API routes. Plus, Nuxt also generates types for globally available components and auto-imports from your composables, plus other core functionality.

Keep in mind that all options extended from ./.nuxt/tsconfig.json will be overwritten by the options defined in your tsconfig.json. Overwriting options such as "compilerOptions.paths" with your own configuration will lead TypeScript to not factor in the module resolutions from ./.nuxt/tsconfig.json. This can lead to module resolutions such as #imports not being recognized.

In case you need to extend options provided by ./.nuxt/tsconfig.json further, you can use the alias property within your nuxt.config. nuxi will pick them up and extend ./.nuxt/tsconfig.json accordingly.

Strict Checks

TypeScript comes with certain checks to give you more safety and analysis of your program.

Strict checks are enabled by default in Nuxt 3 to give you greater type safety.

If you are currently converting your codebase to TypeScript, you may want to temporarily disable strict checks by setting strict to false in your nuxt.config:

nuxt.config.ts

export default defineNuxtConfig
({
  typescript
: {
    strict
: false
  }
})

ES Modules

Nuxt 3 (and Bridge) uses Native ES Modules.

Code Style

Nuxt supports ESLint out of the box