{"id":14243,"library":"vite-plugin-vue-type-imports","title":"Vite Plugin Vue Type Imports","description":"vite-plugin-vue-type-imports is a Vite plugin designed to enable the use of imported TypeScript types directly within Vue's `defineProps` and `defineEmits` macros in Single File Components (SFCs). This addresses a common limitation in Vue 3's `<script setup>` where type imports are not natively processed for runtime props validation or type inference. The plugin supports both Vue 2.7+ and Vue 3.2.24+ projects. Currently at version 0.2.5, it is still in active development, indicating an irregular release cadence focused on feature enhancements and bug fixes. Its key differentiator is simplifying type management in complex Vue components by allowing external type definitions to be used seamlessly, although it has known limitations regarding advanced TypeScript features and specific import patterns.","status":"active","version":"0.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/wheatjs/vite-plugin-vue-type-imports","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-type-imports","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-type-imports","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-type-imports","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for plugin integration with Vite build system.","package":"vite","optional":false},{"reason":"Required as a peer dependency for processing Vue SFCs and their type definitions.","package":"vue","optional":false}],"imports":[{"note":"The plugin is exported as a default export, not a named one. Used in `vite.config.ts`.","wrong":"import { VueTypeImports } from 'vite-plugin-vue-type-imports'","symbol":"VueTypeImports","correct":"import VueTypeImports from 'vite-plugin-vue-type-imports'"},{"note":"Standard Vite utility function for defining configuration in `vite.config.ts`.","symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"},{"note":"Commonly imported official Vue plugin for Vite, typically used alongside this plugin.","symbol":"Vue","correct":"import Vue from '@vitejs/plugin-vue'"}],"quickstart":{"code":"import { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport VueTypeImports from 'vite-plugin-vue-type-imports'\n\nexport default defineConfig({\n  plugins: [\n    Vue(), \n    VueTypeImports()\n  ]\n})\n\n// types.ts\nexport interface User {\n  username: string\n  password: string\n  avatar?: string\n}\n\n// MyComponent.vue\n<script setup lang=\"ts\">\nimport type { User } from './types'\n\ndefineProps<User>()\n</script>\n\n<template>\n  <div>Hello, {{ user.username }}</div>\n</template>","lang":"typescript","description":"This quickstart demonstrates how to configure the plugin in `vite.config.ts` and then use an imported type (`User`) directly in a Vue 3 `<script setup>` component's `defineProps`."},"warnings":[{"fix":"Monitor the project's GitHub repository for updates and test thoroughly. Report any encountered issues to the maintainers.","message":"The plugin is still in active development and may contain bugs. Use with caution in production environments.","severity":"gotcha","affected_versions":">=0.2.5"},{"fix":"Refactor namespace imports to use named imports (e.g., `import { Foo } from 'foo'`) or import individual types explicitly.","message":"Namespace type imports (e.g., `import * as Foo from 'foo'`) are not supported by the plugin.","severity":"breaking","affected_versions":">=0.2.5"},{"fix":"Simplify complex type definitions where possible, or define them directly within the `<script setup>` block without relying on external imports for these specific complex types.","message":"Advanced TypeScript types, specifically those involving complex type manipulations like conditional or mapped types, may not be fully supported.","severity":"breaking","affected_versions":">=0.2.5"},{"fix":"Ensure all type imports and definitions intended for `defineProps` or `defineEmits` are placed within the `<script setup lang=\"ts\">` block.","message":"The plugin exclusively scans content within `<script setup>` blocks; types defined or imported within regular `<script>` blocks will be ignored.","severity":"gotcha","affected_versions":">=0.2.5"},{"fix":"Avoid circular type dependencies or ensure they are explicitly defined within their own scope (e.g., `interface Foo { foo: Foo }`) without an intermediate type alias causing an infinite loop.","message":"Implicitly self-referencing types (e.g., `export type Bar = Foo; export interface Foo { foo: Bar }`) can lead to infinite loops and incorrect type definitions.","severity":"gotcha","affected_versions":">=0.2.5"},{"fix":"Rename types that end with numerical suffixes to avoid potential conflicts with plugin-generated identifiers.","message":"Using type names ending with numerical suffixes (e.g., `Foo_1`, `Bar_2`) is discouraged as it may conflict with the plugin's internal transformation logic.","severity":"gotcha","affected_versions":">=0.2.5"}],"env_vars":null,"search_vec":"'3':45 'address':39 'common':41 'compon':36 'defineemit':31 'defineprop':29 'design':16 'direct':25 'enabl':18 'file':35 'import':5,11,22 'limit':42 'macro':32 'plugin':2,8,15 'sfcs':37 'singl':34 'type':4,10,24 'typescript':23 'use':20 'vite':1,7,14 'vite-plugin-vue-type-import':6 'vue':3,9,27,44 'within':26","created_at":"2026-04-20T01:58:41.230406+00:00","updated_at":"2026-04-20T01:58:41.230406+00:00","problems":[{"fix":"Change namespace imports to named imports, e.g., `import { MyType1, MyType2 } from './types'`.","cause":"Attempting to use namespace type imports (e.g., `import * as MyTypes from './types'`) which are not supported.","error":"Module parse failed: Unexpected token '*'. You may need an appropriate loader to handle this file type."},{"fix":"Simplify the problematic TypeScript type definition or define it directly within the `<script setup>` block rather than importing it.","cause":"The plugin failed to correctly process an advanced TypeScript type used in `defineProps` or `defineEmits` due to its complexity.","error":"Property 'someProp' is missing in type 'PropDefinition' but required in type 'ComplexType'."},{"fix":"Move the definition or import of 'MyType' from `<script>` to the `<script setup lang=\"ts\">` block of your Vue component.","cause":"A type was defined or imported in a regular `<script>` block, but the plugin only processes types within `<script setup>`.","error":"Cannot find name 'MyType'. Did you mean 'myType'?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-vue-type-imports","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}