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!

Installation Standalone Version #

if you need defineOptions feature only, the standalone version is more appropriate for you.

Installation #

npm i -D unplugin-vue-define-options

yarn add -D unplugin-vue-define-options

pnpm add -D unplugin-vue-define-options

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [DefineOptions()],
})

// rollup.config.js
import DefineOptions from 'unplugin-vue-define-options/rollup'

export default {
  plugins: [DefineOptions()],
}

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [require('unplugin-vue-define-options/esbuild')()],
})

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-define-options/webpack')()],
}

TypeScript Support #

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

Basic Usage #

<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>

<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
}
</script>

<script setup>
const slots = useSlots()
</script>

JSX in <script setup> #

<script setup lang="tsx">
defineOptions({
  render() {
    return <h1>Hello World</h1>
  },
})
</script>

<script lang="tsx">
export default {
  render() {
    return <h1>Hello World</h1>
  },
}
</script>