https://github.com/unplugin/unplugin-vue-tsx-auto-props
🎶 Add props for your tsx functional components automatically
https://github.com/unplugin/unplugin-vue-tsx-auto-props
Last synced: 7 months ago
JSON representation
🎶 Add props for your tsx functional components automatically
- Host: GitHub
- URL: https://github.com/unplugin/unplugin-vue-tsx-auto-props
- Owner: unplugin
- License: mit
- Archived: true
- Created: 2023-05-15T07:40:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-28T13:12:54.000Z (over 1 year ago)
- Last Synced: 2024-11-24T20:55:24.432Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 372 KB
- Stars: 40
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚠⚠⚠ DEPRECATED: Moved to https://github.com/so1ve/vue.ts/tree/main/packages/tsx-auto-props!
---
# unplugin-vue-tsx-auto-props
[](https://www.npmjs.com/package/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:
```tsx
import { defineComponent } from "vue";
interface Props {
foo: string;
}
const Foo = defineComponent((props: Props) => () =>
{props.foo});
Foo.props = ["foo"]; // 👈 You need to manually specify the props :(
```
After:
```tsx
import { defineComponent } from "vue";
interface Props {
foo: string;
}
const Foo = defineComponent((props: Props) => () =>
{props.foo});
Object.defineProperty(Foo, "props", {
value: ["foo"],
}); // 👈 This plugin will do it for you!
```
## 📦 Installation
```bash
$ 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
```ts
// vite.config.ts
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/vite";
export default defineConfig({
plugins: [
VueTsxAutoProps({
/* options */
}),
],
});
```
Rollup
```ts
// rollup.config.js
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/rollup";
export default {
plugins: [
VueTsxAutoProps({
/* options */
}),
// other plugins
],
};
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require("unplugin-vue-tsx-auto-props/webpack")({
/* options */
}),
],
};
```
Nuxt
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["unplugin-vue-tsx-auto-props/nuxt"],
});
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require("unplugin-vue-tsx-auto-props/webpack")({
/* options */
}),
],
},
};
```
Quasar
```ts
// quasar.conf.js [Vite]
module.exports = {
vitePlugins: [
[
"unplugin-vue-tsx-auto-props/vite",
{
/* options */
},
],
],
};
```
```ts
// 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
```ts
// esbuild.config.js
import { build } from "esbuild";
build({
/* ... */
plugins: [
require("unplugin-vue-tsx-auto-props/esbuild")({
/* options */
}),
],
});
```
Astro
```ts
// astro.config.mjs
import VueTsxAutoProps from "unplugin-vue-tsx-auto-props/astro";
export default defineConfig({
integrations: [
VueTsxAutoProps({
/* options */
}),
],
});
```
## 📝 License
[MIT](./LICENSE). Made with ❤️ by [Ray](https://github.com/so1ve)