defineOptions #
Stability: stable
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 the RFC Discussion. Thanks!
Features | Supported |
---|---|
Vue 3 | ✅ |
Nuxt 3 | ✅ |
Vue 2 | ✅ |
TypeScript | ✅ |
Installation Standalone Version #
if you need defineOptions
feature only, the standalone version is more appropriate for you.
Installation #
bash
npm i -D unplugin-vue-define-options
bash
yarn add -D unplugin-vue-define-options
bash
pnpm add -D unplugin-vue-define-options
ts
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
export default defineConfig({
plugins: [DefineOptions()],
})
ts
// rollup.config.js
import DefineOptions from 'unplugin-vue-define-options/rollup'
export default {
plugins: [DefineOptions()],
}
js
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [require('unplugin-vue-define-options/esbuild')()],
})
js
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-vue-define-options/webpack')()],
}
TypeScript Support #
json
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options/macros-global" /* ... */]
}
}
Basic Usage #
vue
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
})
const slots = useSlots()
</script>
Compiled Code
vue
<script lang="ts">
export default {
name: 'Foo',
inheritAttrs: false,
}
</script>
<script setup>
const slots = useSlots()
</script>
JSX in <script setup>
#
vue
<script setup lang="tsx">
defineOptions({
render() {
return <h1>Hello World</h1>
},
})
</script>
Compiled Code
vue
<script lang="tsx">
export default {
render() {
return <h1>Hello World</h1>
},
}
</script>