<p align="center">
  <img src="https://github.com/vue-macros/vue-macros/raw/main/docs/public/logo.svg" width="200px" />
</p>

# unplugin-vue-define-options [![npm](https://img.shields.io/npm/v/unplugin-vue-define-options.svg)](https://npmjs.com/package/unplugin-vue-define-options)

Options API can be declared using the `defineOptions` in `<script setup>`, specifically to be able to set `name`, `props`, `emits`, and `render` inside of one function.

If you support this feature, feel free to hit like 👍 or comment on [RFC Discussion](https://github.com/vuejs/rfcs/discussions/430). Thanks!

## Features

- ✨ With this macro, you can use Options API in Vue `<script setup>`.
- 💚 Supports both Vue 2.7 and Vue 3 out-of-the-box.
- 🦾 Full TypeScript support.
- ⚡️ Supports most bundlers powered by [unplugin](https://github.com/unjs/unplugin).
  - Vite, Nuxt
  - Webpack, Rspack, Vue CLI
  - Rollup 3
  - esbuild
  - and more...

## Usage

[📜 Documentation](https://vue-macros.dev/macros/define-options.html)

### See Also

- [Related issue](https://github.com/vuejs/core/issues/5218#issuecomment-1032107354)
- [RFC](https://github.com/vuejs/rfcs/discussions/430)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/sxzz/sponsors/sponsors.wide.svg">
    <img src='https://cdn.jsdelivr.net/gh/sxzz/sponsors/sponsors.wide.svg'/>
  </a>
</p>

## License

[MIT](./LICENSE) License © 2022-PRESENT [三咲智子](https://github.com/sxzz)
