Registry / web-framework / vite-plugin-vue-type-imports

vite-plugin-vue-type-imports

library0.2.5jsnpmunverified

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.

web-framework

npm install vite-plugin-vue-type-imports

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-TY

vite-plugin-vue-type-imports

web-frameworkjavascriptv0.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTypeImports

✓ import VueTypeImports from 'vite-plugin-vue-type-imports'

✗ import { VueTypeImports } from 'vite-plugin-vue-type-imports'

The plugin is exported as a default export, not a named one. Used in `vite.config.ts`.

defineConfig

✓ import { defineConfig } from 'vite'

Standard Vite utility function for defining configuration in `vite.config.ts`.

Vue

✓ import Vue from '@vitejs/plugin-vue'

Commonly imported official Vue plugin for Vite, typically used alongside this plugin.

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`.

import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import VueTypeImports from 'vite-plugin-vue-type-imports' export default defineConfig({ plugins: [ Vue(), VueTypeImports() ] }) // types.ts export interface User { username: string password: string avatar?: string } // MyComponent.vue <script setup lang="ts"> import type { User } from './types' defineProps<User>() </script> <template> <div>Hello, {{ user.username }}</div> </template>

Debug

Known issues

gotchaThe plugin is still in active development and may contain bugs. Use with caution in production environments.

fix

Monitor the project's GitHub repository for updates and test thoroughly. Report any encountered issues to the maintainers.

affects: >=0.2.5

breakingNamespace type imports (e.g., `import * as Foo from 'foo'`) are not supported by the plugin.

fix

Refactor namespace imports to use named imports (e.g., `import { Foo } from 'foo'`) or import individual types explicitly.

affects: >=0.2.5

breakingAdvanced TypeScript types, specifically those involving complex type manipulations like conditional or mapped types, may not be fully supported.

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.

affects: >=0.2.5

gotchaThe plugin exclusively scans content within `<script setup>` blocks; types defined or imported within regular `<script>` blocks will be ignored.

fix

Ensure all type imports and definitions intended for `defineProps` or `defineEmits` are placed within the `<script setup lang="ts">` block.

affects: >=0.2.5

gotchaImplicitly self-referencing types (e.g., `export type Bar = Foo; export interface Foo { foo: Bar }`) can lead to infinite loops and incorrect type definitions.

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.

affects: >=0.2.5

gotchaUsing 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.

fix

Rename types that end with numerical suffixes to avoid potential conflicts with plugin-generated identifiers.

affects: >=0.2.5

Errors

Common errors & fixes

Module parse failed: Unexpected token '*'. You may need an appropriate loader to handle this file type.

Attempting to use namespace type imports (e.g., `import * as MyTypes from './types'`) which are not supported.

fix

Change namespace imports to named imports, e.g., `import { MyType1, MyType2 } from './types'`.

Property 'someProp' is missing in type 'PropDefinition' but required in type 'ComplexType'.

The plugin failed to correctly process an advanced TypeScript type used in `defineProps` or `defineEmits` due to its complexity.

fix

Simplify the problematic TypeScript type definition or define it directly within the `<script setup>` block rather than importing it.

Cannot find name 'MyType'. Did you mean 'myType'?

A type was defined or imported in a regular `<script>` block, but the plugin only processes types within `<script setup>`.

fix

Move the definition or import of 'MyType' from `<script>` to the `<script setup lang="ts">` block of your Vue component.

Upgrade

Version history

0.2.5latest on npm

Audit

Dependencies

viterequiredRequired as a peer dependency for plugin integration with Vite build system.

vuerequiredRequired as a peer dependency for processing Vue SFCs and their type definitions.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-vue-type-imports ↗