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

Install

# Install Plugin
npm i -D @zolyn/vite-plugin-vue-type-imports

// vite.config.ts

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import VueTypeImports from '@zolyn/vite-plugin-vue-type-imports'

export default defineConfig({
  plugins: [
    Vue(), 
    VueTypeImports(),
  ],
})

Nuxt

// nuxt.config.ts

export default {
  buildModules: [
    '@zolyn/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

• The following syntaxes are not supported currently:
  • import default
  • import { a as b }
  • export default
  • export * from
• nested type parameters (e.g. defineProps<Props<T>>()) are not supported.
• ~~At this stage, the plugin only scans the imported interfaces and does not process the interfaces defined in the SFC~~ Supported in v0.3.0
• ~~HMR is not fully supported right now.~~ Fixed in v0.3.1
• Interface which extends Literal Type or Intersection Type is not supported.
• Types imported from external packages are not fully supported right now.
• When interfaces implicitly rely on interfaces with the same name but different structures, the results may be different from what is expected.

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 traverse the AST (using @babel/parser).

License

MIT License © 2021-PRESENT Jacob Clevenger & Yumeoto Zorin