Unplugin-vue-tsx-auto-props NPM

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 */
    }),
  ],
});