Package Exports

@vue.ts/tsx-auto-props
@vue.ts/tsx-auto-props/astro
@vue.ts/tsx-auto-props/esbuild
@vue.ts/tsx-auto-props/farm
@vue.ts/tsx-auto-props/nuxt
@vue.ts/tsx-auto-props/rolldown
@vue.ts/tsx-auto-props/rollup
@vue.ts/tsx-auto-props/rspack
@vue.ts/tsx-auto-props/types
@vue.ts/tsx-auto-props/vite
@vue.ts/tsx-auto-props/webpack

Readme

@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

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

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

Rolldown

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

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

Rollup

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

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

Webpack

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

Nuxt

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

Vue CLI

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

Quasar

// 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

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

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

Astro

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

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

📝 License

MIT. Made with ❤️ by Ray