Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wheatjs/vite-plugin-vue-type-imports
Import types in Vue SFC for defineProps
https://github.com/wheatjs/vite-plugin-vue-type-imports
Last synced: 1 day ago
JSON representation
Import types in Vue SFC for defineProps
- Host: GitHub
- URL: https://github.com/wheatjs/vite-plugin-vue-type-imports
- Owner: wheatjs
- Created: 2021-10-31T03:46:39.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-13T16:42:47.000Z (10 months ago)
- Last Synced: 2024-12-20T13:49:30.203Z (1 day ago)
- Language: TypeScript
- Size: 291 KB
- Stars: 223
- Watchers: 3
- Forks: 18
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - wheatjs/vite-plugin-vue-type-imports - Import types in Vue SFC for defineProps (TypeScript)
README
vite-plugin-vue-type-imports
Enables you to import types and use them in your defineProps and defineEmits. Supports both Vue 2 and Vue 3.
> ⚠️ This Plugin is still in Development and there may be bugs. Use at your own risk.
## Install
```bash
# Install Plugin
npm i -D vite-plugin-vue-type-imports
```
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import VueTypeImports from 'vite-plugin-vue-type-imports'
export default defineConfig({
plugins: [
Vue(),
VueTypeImports(),
],
})
```
### Nuxt
```ts
// nuxt.config.ts
export default {
buildModules: [
'vite-plugin-vue-type-imports/nuxt',
]
}
```
## Usage
```ts
// types.ts
export interface User {
username: string
password: string
avatar?: string
}
```
```html
import type { User } from '~/types'
defineProps<User>()
...
```
## Known limitations
- Namespace imports like `import * as Foo from 'foo'` are not supported.
- [These types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) are not supported.
- The plugin currently only scans the content of ``. Types defined in `<script>` will be ignored.
## Notes
- `Enum` types will be converted to Union Types (e.g. `type [name] = number | string`) , since Vue can't handle them right now.
- The plugin may be slow because it needs to read files and traverse the AST (using @babel/parser).
## Caveats
- **Do not reference the types themselves implicitly, it will cause infinite loop**.
Vue will also get wrong type definition even if you disable this plugin.
Illegal code:
```ts
export type Bar = Foo
export interface Foo {
foo: Bar
}
```
Alternatively, you can reference the types themselves in their own definitions
Acceptable code:
```ts
export type Bar = string
export interface Foo {
foo: Foo
bar: Foo | Bar
}
```
- Ending the type name with something like `_1` and `_2` is not recommended, because it may **conflict** with the plugin's transformation result
These types may cause conflicts:
```ts
type Foo_1 = string
type Bar_2 = number
```
## License
[MIT License](https://github.com/jacobclevenger/vite-plugin-vue-gql/blob/main/LICENSE) © 2021-PRESENT [Jacob Clevenger](https://github.com/jacobclevenger)