@vue.ts/tsx-auto-props

Why?

Vue does not provide a way to automatically specify props for functional components written in TSX. This plugin solves this problem.

Before:

import { defineComponent } from "vue";

interface Props {
	foo: string;
}

const Foo = defineComponent((props: Props) => () => <div>{props.foo}</div>);
Foo.props = ["foo"]; // 👈 You need to manually specify the props :(

After:

import { defineComponent } from "vue";

interface Props {
	foo: string;
}

const Foo = defineComponent((props: Props) => () => <div>{props.foo}</div>);
Object.defineProperty(Foo, "props", {
	value: ["foo"],
}); // 👈 This plugin will do it for you!

📦 Installation

$ npm install -D @vue.ts/tsx-auto-props
$ yarn add -D @vue.ts/tsx-auto-props
$ pnpm add -D @vue.ts/tsx-auto-props

🚀 Usage

// vite.config.ts
import VueTsxAutoProps from "@vue.ts/tsx-auto-props/vite";

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

// rollup.config.js
import VueTsxAutoProps from "@vue.ts/tsx-auto-props/rollup";

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

// webpack.config.js
module.exports = {
	/* ... */
	plugins: [
		require("@vue.ts/tsx-auto-props/webpack")({
			/* options */
		}),
	],
};

// nuxt.config.ts
export default defineNuxtConfig({
	modules: ["@vue.ts/tsx-auto-props/nuxt"],
});

// vue.config.js
module.exports = {
	configureWebpack: {
		plugins: [
			require("@vue.ts/tsx-auto-props/webpack")({
				/* options */
			}),
		],
	},
};

// quasar.conf.js [Vite]
module.exports = {
	vitePlugins: [
		[
			"@vue.ts/tsx-auto-props/vite",
			{
				/* options */
			},
		],
	],
};

// quasar.conf.js [Webpack]
const VueTsxAutoPropsPlugin = require("@vue.ts/tsx-auto-props/webpack");

module.exports = {
	build: {
		chainWebpack(chain) {
			chain.plugin("@vue.ts/tsx-auto-props").use(
				VueTsxAutoPropsPlugin({
					/* options */
				}),
			);
		},
	},
};

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

build({
	/* ... */
	plugins: [
		require("@vue.ts/tsx-auto-props/esbuild")({
			/* options */
		}),
	],
});

// astro.config.mjs
import VueTsxAutoProps from "@vue.ts/tsx-auto-props/astro";

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

📝 License

MIT. Made with ❤️ by Ray