unplugin-vue-tsx-auto-props
v0.4.1
Published
[![NPM version](https://img.shields.io/npm/v/unplugin-vue-tsx-auto-props?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-tsx-auto-props)
Downloads
34
Maintainers
Readme
unplugin-vue-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 unplugin-vue-tsx-auto-props
$ yarn add -D unplugin-vue-tsx-auto-props
$ pnpm add -D unplugin-vue-tsx-auto-props
🚀 Usage
// vite.config.ts
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/vite";
export default defineConfig({
plugins: [
VueTsxAutoProps({
/* options */
}),
],
});
// rollup.config.js
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/rollup";
export default {
plugins: [
VueTsxAutoProps({
/* options */
}),
// other plugins
],
};
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require("unplugin-vue-tsx-auto-props/webpack")({
/* options */
}),
],
};
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["unplugin-vue-tsx-auto-props/nuxt"],
});
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require("unplugin-vue-tsx-auto-props/webpack")({
/* options */
}),
],
},
};
// 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.config.js
import { build } from "esbuild";
build({
/* ... */
plugins: [
require("unplugin-vue-tsx-auto-props/esbuild")({
/* options */
}),
],
});
// astro.config.mjs
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/astro";
export default defineConfig({
integrations: [
VueTsxAutoProps({
/* options */
}),
],
});