Skip to content
This repository has been archived by the owner on Jun 12, 2023. It is now read-only.

Zolyn/vite-plugin-vue-type-imports

 
 

Repository files navigation

vite-plugin-vue-type-imports

Enables you to import types and use them in your defineProps and defineEmits

NPM version

⚠️ This Plugin is still in Development and there may be bugs. Use at your own risk.

Install

# Install Plugin
npm i -D vite-plugin-vue-type-imports
// 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

// nuxt.config.ts

export default {
  buildModules: [
    'vite-plugin-vue-type-imports/nuxt',
  ]
}

Usage

// types.ts

export interface User {
  username: string
  password: string
  avatar?: string
}
<script setup lang="ts">
import type { User } from '~/types'

defineProps<User>()
</script>

<template>...</template>

Known limitations

  • Namespace imports like import * as Foo from 'foo' are not supported.
  • These types are not supported.
  • The plugin currently only scans the content of <script setup>. 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:

export type Bar = Foo
export interface Foo {
  foo: Bar
}

Alternatively, you can reference the types themselves in their own definitions

Acceptable code:

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:

type Foo_1 = string
type Bar_2 = number

License

MIT License © 2021-PRESENT Jacob Clevenger

About

Import types in Vue SFC for defineProps

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.3%
  • HTML 1.1%
  • Vue 0.6%