SKILL.md

name	description
vue-tsc-compiler-options	Configures Vue 3 template type checking via vueCompilerOptions in tsconfig.app.json. Covers strictTemplates, checkUnknownComponents, checkUnknownProps, checkUnknownEvents, and checkUnknownDirectives. Use when setting up vue-tsc, diagnosing unknown component errors, or enabling strict template validation.

Vue Compiler Options for Type Checking

Which tsconfig?

Add vueCompilerOptions to the tsconfig that includes Vue source files. In projects with multiple tsconfigs, this is typically tsconfig.app.json, not the root tsconfig.json or tsconfig.node.json.

Quick Reference

Enable strict template checking in tsconfig.app.json:

{
  "compilerOptions": { ... },
  "vueCompilerOptions": {
    "strictTemplates": true
  }
}

This enables all checkUnknown* options automatically.

Options

Option	Default	Effect
strictTemplates	false	Enables all checkUnknown* options below
checkUnknownComponents	false	Error on undefined/unregistered components
checkUnknownProps	false	Error on props not declared in component definition
checkUnknownEvents	false	Error on events not declared via defineEmits
checkUnknownDirectives	false	Error on unregistered custom directives

Granular Control

If strictTemplates is too strict, enable individual checks:

{
  "vueCompilerOptions": {
    "checkUnknownComponents": true,
    "checkUnknownProps": false
  }
}

Common Issue

Problem: vue-tsc passes but undefined components exist in templates.

Cause: checkUnknownComponents defaults to false.

Fix: Enable strictTemplates or checkUnknownComponents explicitly.

Reference

Full documentation: https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options