DOCSEARCHbyAlgolia
Submit Docs

@vue/tsconfig

repository·main·Indexed 18 days ago

https://github.com/vuejs/tsconfig

A collection of TypeScript configurations optimized for Vue.js projects, providing sensible defaults for Browser, Node.js, and Library development. Supports Vue.js >= 3.4 and TypeScript >= 5.8 (with legacy support for older TS versions).

Tokens
795
Snippets
5
Records
6
Agent score
13%

What's inside @vue/tsconfig

  1. Migrate from TypeScript < 5.0

    main

    If upgrading from older versions, note the following breaking changes:

    • Renamed Files: tsconfig.web.json is now tsconfig.dom.json.
    • Removed Files: tsconfig.node.json has been removed; use the Node.js environment guide instead.
    • Module Resolution: moduleResolution has changed from node to bundler. This enables resolvePackageJsonExports: true by default. If third-party packages break due to incorrect exports fields, you can temporarily override this in your tsconfig.json:
      "compilerOptions": {
  "resolvePackageJsonExports": false
}
    • Module Syntax: The import mod = require("foo") syntax is no longer supported under moduleResolution: bundler.
    • Library Defaults: tsconfig.dom.json now includes ES2022 by default. To target older browsers and enforce stricter checks, override the lib option:
      {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "lib": ["ES2016", "DOM", "DOM.Iterable"]
  }
}

  2. Install @vue/tsconfig

    main

    Install the @vue/tsconfig package as a development dependency to use its pre-configured TypeScript configurations in your Vue projects.

    Requirements:

    • TypeScript >= 5.8 (For TS 4.5–4.9, use v0.1.x. For TS 5.0–5.7, use v0.7.x).
    • Vue.js >= 3.4.
    npm add -D @vue/tsconfig

  3. Enable Declaration File Emitting for Libraries

    main

    By default, the Vue TSConfigs do not emit declaration files (standard for bundler-based apps). If you are building a library or component library, extend @vue/tsconfig/tsconfig.lib.json in addition to your environment configuration.

    {
  "extends": [
    "@vue/tsconfig/tsconfig.dom.json",
    "@vue/tsconfig/tsconfig.lib.json"
  ]
}

  4. Configure Node.js Environments with Vue

    main

    If you are using Vue components in a Node.js environment (such as Server Side Rendering or Vitest), you must extend both the Node.js TSConfig and the Vue TSConfig.

    Important: Place @vue/tsconfig/tsconfig.json after the Node.js configuration in the extends array so that Vue's settings take precedence.

    # Install base tsconfig and types for your Node version
npm add -D @tsconfig/node24 @types/node@24
    {
  "extends": [
    "@tsconfig/node24/tsconfig.json",
    "@vue/tsconfig/tsconfig.json"
  ],
  "compilerOptions": {
    "types": ["node"]
  }
}

  5. Use the Base Configuration (Runtime-agnostic)

    main

    For projects that do not target a specific environment (like a pure logic library), extend the base configuration in your tsconfig.json.

    {
  "extends": "@vue/tsconfig/tsconfig.json"
}

  6. Use the Browser Environment Configuration

    main

    For projects targeting the browser (e.g., standard Vue SPA applications), extend the DOM configuration in your tsconfig.json.

    {
  "extends": "@vue/tsconfig/tsconfig.dom.json"
}