{"id":12612,"library":"vue-tsx-support","title":"Vue TSX Type Support","description":"vue-tsx-support is a TypeScript support library designed to enable and enhance the use of TSX (JSX for TypeScript) within Vue 2 applications. Currently at version 3.2.0, this package primarily functions as a type checker, providing robust type safety for JSX syntax used in Vue 2 components. It is crucial to note that vue-tsx-support does not handle JSX transpilation; users must integrate a separate Babel preset (such as `@vue/babel-preset-jsx`) for this purpose. A key differentiator is its explicit focus on the Vue 2 ecosystem; it does not support Vue 3, which incorporates its own JSX type checking mechanisms that are incompatible. The library supports various component styles, including object-style, class-style (with `vue-class-component`), and `@vue/composition-api`, with specific instructions for each. The project is largely in a maintenance phase, as its core functionality is tied to the now older Vue 2 major version.","status":"maintenance","version":"3.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/wonderful-panda/vue-tsx-support","tags":["javascript","Vue","TypeScript","JSX","TSX","typescript"],"install":[{"cmd":"npm install vue-tsx-support","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tsx-support","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tsx-support","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 applications, required at runtime.","package":"vue","optional":false},{"reason":"Peer dependency, essential for TypeScript type checking and development.","package":"typescript","optional":false},{"reason":"Optional dependency for using Vue's Composition API in Vue 2 applications with TSX.","package":"@vue/composition-api","optional":true},{"reason":"Not a direct npm dependency, but a critical prerequisite for JSX transpilation at build time.","package":"@vue/babel-preset-jsx","optional":false}],"imports":[{"note":"This import is crucial for global type checking of JSX intrinsic elements and needs to be included once in your project's main TypeScript file or `tsconfig.json`.","wrong":"import { enableCheck } from 'vue-tsx-support';","symbol":"enable-check.d.ts","correct":"import 'vue-tsx-support/enable-check';"},{"note":"Used for creating type-safe TSX components when using the object-style API (similar to `Vue.extend`).","symbol":"createTsxComponent","correct":"import { createTsxComponent } from 'vue-tsx-support';"},{"note":"Extend this class when writing class-style components with `vue-class-component` for TSX type support.","symbol":"Component (class)","correct":"import { Component } from 'vue-tsx-support';"}],"quickstart":{"code":"// tsconfig.json excerpt\n// {\n//   \"compilerOptions\": {\n//     \"jsx\": \"preserve\",\n//     \"jsxFactory\": \"VueTsxSupport\",\n//     \"target\": \"esnext\",\n//     \"module\": \"esnext\",\n//     \"strict\": true\n//   },\n//   \"include\": [\n//     \"src/**/*.ts\",\n//     \"src/**/*.tsx\",\n//     \"src/**/*.vue\",\n//     \"node_modules/vue-tsx-support/enable-check.d.ts\" // Alternative to explicit import\n//   ]\n// }\n\n// src/components/MyCounter.tsx\nimport Vue from 'vue';\nimport { createTsxComponent } from 'vue-tsx-support';\n\ninterface MyCounterProps {\n  initialValue?: number;\n  label: string;\n}\n\ninterface MyCounterEvents {\n  onChange: (newValue: number) => void;\n}\n\nconst MyCounter = createTsxComponent<MyCounterProps, MyCounterEvents>({\n  name: 'MyCounter',\n  props: {\n    initialValue: { type: Number, default: 0 },\n    label: { type: String, required: true },\n  },\n  data() {\n    return { count: this.initialValue };\n  },\n  methods: {\n    increment() {\n      this.count++;\n      this.$emit('change', this.count);\n    },\n    decrement() {\n      this.count--;\n      this.$emit('change', this.count);\n    },\n  },\n  render() {\n    return (\n      <div>\n        <span>{this.label}: {this.count}</span>\n        <button onClick={this.increment}>+</button>\n        <button onClick={this.decrement}>-</button>\n      </div>\n    );\n  },\n});\n\nexport default MyCounter;\n\n// src/App.tsx (Example usage in a parent component)\nimport Vue from 'vue';\nimport MyCounter from './components/MyCounter';\n\n// Crucial for global type checking of JSX intrinsic elements like 'div', 'span'\nimport 'vue-tsx-support/enable-check';\n\nexport default Vue.extend({\n  name: 'App',\n  data() {\n    return { totalCount: 0 };\n  },\n  methods: {\n    handleCounterChange(newValue: number) {\n      this.totalCount = newValue; // In a real app, this might accumulate counts\n      console.log(`Counter changed to: ${newValue}`);\n    },\n  },\n  render() {\n    return (\n      <div>\n        <h1>Vue TSX Application</h1>\n        <p>Current Total: {this.totalCount}</p>\n        <MyCounter label=\"Counter 1\" initialValue={5} onChange={this.handleCounterChange} />\n        <MyCounter label=\"Counter 2\" onChange={this.handleCounterChange} />\n      </div>\n    );\n  },\n});\n","lang":"typescript","description":"This quickstart demonstrates how to define a type-safe TSX component with props and emitted events using `createTsxComponent` and how to consume it in a parent component, including the necessary global type import."},"warnings":[{"fix":"Consult the official 'Migration from V2' guide in the `vue-tsx-support` README to understand specific API changes and update component definitions and imports accordingly.","message":"Projects migrating from `vue-tsx-support` v2 to v3 will encounter breaking changes. Refer to the 'Migration from V2' section in the package's README for detailed instructions on updating your codebase.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"For Vue 3 projects, use Vue's built-in JSX/TSX support. Do not attempt to install `vue-tsx-support`. If migrating from Vue 2 to Vue 3, you must remove this package and adjust your JSX setup.","message":"`vue-tsx-support` is explicitly designed for Vue 2 (>=2.6.0, <3.0.0) and does not support Vue 3. Vue 3 has its own native JSX type checking and incompatibilities exist.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Ensure your project's Babel configuration includes a preset capable of transpiling JSX. For Vue CLI projects, ensure `@vue/babel-preset-app` is installed or add `@vue/babel-preset-jsx` manually.","message":"`vue-tsx-support` is solely a type checker and does not transpile JSX/TSX code into valid JavaScript. You *must* configure a separate Babel preset (e.g., `@vue/babel-preset-jsx` or `@vue/babel-preset-app`) in your build pipeline.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Update your `tsconfig.json` to include: `\"compilerOptions\": { \"jsx\": \"preserve\", \"jsxFactory\": \"VueTsxSupport\" }`. Incorrect settings will lead to TypeScript errors related to JSX.","message":"Proper `tsconfig.json` configuration is critical. You must set `compilerOptions.jsx` to `\"preserve\"` and `compilerOptions.jsxFactory` to `\"VueTsxSupport\"` for TypeScript to correctly process TSX syntax.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Add `import 'vue-tsx-support/enable-check';` to your main TypeScript entry file (e.g., `main.ts` or `App.tsx`), or add `\"node_modules/vue-tsx-support/enable-check.d.ts\"` to the `include` array in your `tsconfig.json`.","message":"To enable full type checking for intrinsic HTML elements (like `<div>`, `<span>`) and custom components, you must import `vue-tsx-support/enable-check` once in your project, typically in `main.ts` or via `tsconfig.json`'s `include` array.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Verify and update your Babel configuration and presets if you are using `@vue/composition-api` and experiencing issues with JSX/TSX transpilation. Ensure compatible versions are installed.","message":"When using `@vue/composition-api` with `vue-tsx-support`, specific Babel preset versions are required for correct transpilation. `@vue/babel-preset-jsx` >= 1.2.1 or `babel-preset-vue-vca` is necessary.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `jsxFactory` is set to `\"VueTsxSupport\"` in `tsconfig.json` AND that `import 'vue-tsx-support/enable-check';` is present in your main entry file, or `node_modules/vue-tsx-support/enable-check.d.ts` is included in your `tsconfig.json`.","cause":"The TypeScript compiler cannot find the global type declarations for `VueTsxSupport`.","error":"TS2304: Cannot find name 'VueTsxSupport'."},{"fix":"Verify that `\"jsx\": \"preserve\"` is set in your `tsconfig.json`. Also, check your TSX file for unmatched tags or fragments which require `<>...</>` or `<React.Fragment>...</React.Fragment>` (though Vue JSX typically doesn't use fragments directly like React).","cause":"Incorrect `jsx` compiler option in `tsconfig.json`, or a syntax error in your TSX code.","error":"TS2604: JSX element 'div' has no corresponding closing tag."},{"fix":"Confirm that `import 'vue-tsx-support/enable-check';` is present in your project's entry point or included in `tsconfig.json`. Also, check your `tsconfig.json`'s `jsxFactory` setting.","cause":"The global types for JSX intrinsic elements (like `div`, `span`, `input`) are not correctly loaded or configured.","error":"Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IntrinsicElements'."},{"fix":"Ensure your custom component is wrapped with `createTsxComponent<Props, Events>` and that the event names (e.g., `onClick` for an `@click` emit) are correctly specified in the `Events` interface.","cause":"This error typically occurs when using custom components in TSX without properly defining their prop types for `vue-tsx-support`.","error":"TS2339: Property 'onClick' does not exist on type 'VNodeProperties'."}],"ecosystem":"npm"}