---
title: "tsconfig.json"
description: "Learn how Nuxt manages TypeScript configuration across different parts of your project."
canonical_url: "https://nuxt.com/docs/4.x/directory-structure/tsconfig"
---
# tsconfig.json

> Learn how Nuxt manages TypeScript configuration across different parts of your project.

Nuxt [automatically generates](https://nuxt.com/docs/4.x/guide/concepts/typescript#auto-generated-types) multiple TypeScript configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, `.nuxt/tsconfig.node.json` and `.nuxt/tsconfig.shared.json`) that include recommended basic TypeScript configuration for your project, references to [auto-imports](https://nuxt.com/docs/4.x/guide/concepts/auto-imports), [API route types](https://nuxt.com/docs/4.x/guide/concepts/server-engine#typed-api-routes), path aliases, and more.

Your Nuxt project should include the following `tsconfig.json` file at the root of the project:

```json [tsconfig.json]
{
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}
```

<warning>

We do not recommend modifying the contents of this file directly, as doing so could overwrite important settings that Nuxt or other modules rely on. Instead, extend it via `nuxt.config.ts`.

</warning>

<read-more to="https://nuxt.com/docs/4.x/guide/concepts/typescript#project-references">

Read more about the different type contexts of a Nuxt project here.

</read-more>

## Extending TypeScript Configuration

You can customize the TypeScript configuration of your Nuxt project in the `nuxt.config.ts` file: set shared `compilerOptions` for every context at once with `typescript.tsConfig`, and override them for each context (`app`, `shared`, `node`, and `server`) individually.

```ts [nuxt.config.ts]twoslash
// @errors: 2353
export default defineNuxtConfig({
  typescript: {
    // shared compiler options for every generated tsconfig
    tsConfig: {
      compilerOptions: {
        // ...
      },
    },
    // customize tsconfig.app.json
    appTsConfig: {
      // ...
    },
    // customize tsconfig.shared.json
    sharedTsConfig: {
      // ...
    },
    // customize tsconfig.node.json
    nodeTsConfig: {
      // ...
    },
    // customize tsconfig.server.json
    serverTsConfig: {
      // ...
    },
  },
})
```

<note>

Most `compilerOptions` set in `typescript.tsConfig` are shared with every context, but a few are not. DOM- and Vue-specific options (such as `lib`, `jsx` and `jsxImportSource`) only make sense for your application code, so they are applied to `tsconfig.app.json` alone. Nuxt also manages `types`, `paths` and `noEmit` per context (the `node`, `shared` and `server` configs deliberately emit nothing and scan no ambient types), so setting these in `typescript.tsConfig` will not change them. Use the matching per-context option (`appTsConfig`, `nodeTsConfig`, `sharedTsConfig` or `serverTsConfig`) when you need to override them.

</note>

<note>

`typescript.serverTsConfig` and `nitro.typescript.tsConfig` both extend `tsconfig.server.json` and are kept in sync, so setting either has the same effect. Prefer `typescript.serverTsConfig` to keep all four contexts in one place.

</note>


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.