⚠⚠⚠ DEPRECATED: Moved to https://github.com/so1ve/vue.ts/tree/main/packages/tsx-auto-props!
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!$ npm install -D unplugin-vue-tsx-auto-props
$ yarn add -D unplugin-vue-tsx-auto-props
$ pnpm add -D unplugin-vue-tsx-auto-propsVite
// 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 */
}),
],
});