unplugin-vue-complex-types

Use @vue/language-core to support complex types for Vue Macros.

For example: fixes https://github.com/vuejs/core/issues/8286.

📦 Installation

$ npm install -D unplugin-vue-complex-types
$ yarn add -D unplugin-vue-complex-types
$ pnpm add -D unplugin-vue-complex-types

TODOs

• [ ] Add more tests

🚀 Usage

Vite

// vite.config.ts
import VueComplexTypes from "unplugin-vue-complex-types/vite";

export default defineConfig({
	plugins: [
		VueComplexTypes({
			/* options */
		}),
	],
});

Rollup

// rollup.config.js
import VueComplexTypes from "unplugin-vue-complex-types/rollup";

export default {
	plugins: [
		VueComplexTypes({
			/* options */
		}),
		// other plugins
	],
};

Webpack

// webpack.config.js
module.exports = {
	/* ... */
	plugins: [
		require("unplugin-vue-complex-types/webpack")({
			/* options */
		}),
	],
};

Rspack

// rspack.config.js
module.exports = {
	/* ... */
	plugins: [
		require("unplugin-vue-complex-types/rspack")({
			/* options */
		}),
	],
};

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
	modules: ["unplugin-vue-complex-types/nuxt"],
	complexTypes: {
		/* options */
	},
});

Vue CLI

// vue.config.js
module.exports = {
	configureWebpack: {
		plugins: [
			require("unplugin-vue-complex-types/webpack")({
				/* options */
			}),
		],
	},
};

Quasar

// quasar.conf.js [Vite]
module.exports = {
	vitePlugins: [
		[
			"unplugin-vue-complex-types/vite",
			{
				/* options */
			},
		],
	],
};

// quasar.conf.js [Webpack]
const VueComplexTypesPlugin = require("unplugin-vue-complex-types/webpack");

module.exports = {
	build: {
		chainWebpack(chain) {
			chain.plugin("unplugin-vue-complex-types").use(
				VueComplexTypesPlugin({
					/* options */
				}),
			);
		},
	},
};

esbuild

// esbuild.config.js
import { build } from "esbuild";

build({
	/* ... */
	plugins: [
		require("unplugin-vue-complex-types/esbuild")({
			/* options */
		}),
	],
});

Astro

// astro.config.mjs
import VueComplexTypes from "unplugin-vue-complex-types/astro";

export default defineConfig({
	integrations: [
		VueComplexTypes({
			/* options */
		}),
	],
});

📚 Options

tsconfigPath

• Type: string
• Default: path.join(process.cwd(), "tsconfig.json")

🖥️ How it works?

This plugin parses each SFC and traverse <script setup lang="ts">'s AST to find defineProps's type argument and use TypeScript's type checker API to print the resolved type, then we overwrite the original type with the resolved type. Thus Vue's compiler can generate correct runtime code without parsing the complex types.

📝 License

MIT. Made with ❤️ by Ray