unplugin-auto-props

unplugin-auto-props registers props based on TypeScript types for components written in using defineComponent.

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 :(

export default Foo

After:

import { defineComponent } from "vue"

interface Props {
  foo: string
}

const Foo = defineComponent((props: Props) => () => <div>{props.foo}</div>)
Object.defineProperty(Foo, "props", {
  value: {
    foo: {
      type: String,
      required: true,
    },
  },
}) // 👈 This plugin will do it for you!

export default Foo

Install

pnpm add -D unplugin-auto-props

// vite.config.ts
import AutoProps from "unplugin-auto-props/vite"

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

Example: playground/

// rollup.config.js
import AutoProps from "unplugin-auto-props/rollup"

export default {
  plugins: [
    AutoProps({
      /* options */
    }),
  ],
}

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

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    [
      "unplugin-auto-props/nuxt",
      {
        /* options */
      },
    ],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

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

// esbuild.config.js
import { build } from "esbuild"
import AutoProps from "unplugin-auto-props/esbuild"

build({
  plugins: [AutoProps()],
})

Options

import type { MetaCheckerOptions } from "vue-component-meta"

export interface Options {
  tsconfigPath?: string
  checkerOptions?: MetaCheckerOptions
}

Thanks ♥️

• so1ve/vue.ts
• vuejs/language-tools
• volarjs/volar.js

LICENSE

MIT