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

🎢 Add props for your tsx functional components automatically

License

Notifications You must be signed in to change notification settings

unplugin/unplugin-vue-tsx-auto-props

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


unplugin-vue-tsx-auto-props

NPM version

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 unplugin-vue-tsx-auto-props
$ yarn add -D unplugin-vue-tsx-auto-props
$ pnpm add -D unplugin-vue-tsx-auto-props

πŸš€ Usage

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

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


Rollup
// rollup.config.js
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/rollup";

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


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


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


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


Quasar
// quasar.conf.js [Vite]
module.exports = {
	vitePlugins: [
		[
			"unplugin-vue-tsx-auto-props/vite",
			{
				/* options */
			},
		],
	],
};
// quasar.conf.js [Webpack]
const VueTsxAutoPropsPlugin = require("unplugin-vue-tsx-auto-props/webpack");

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


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

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


Astro
// astro.config.mjs
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/astro";

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


πŸ“ License

MIT. Made with ❀️ by Ray

About

🎢 Add props for your tsx functional components automatically

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •