Skip to content

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.

For Vue >= 3.3, this feature will be turned off by default.

FeaturesSupported
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 @vue-macros/volar
bash
yarn add -D unplugin-vue-define-options @vue-macros/volar
bash
pnpm add -D unplugin-vue-define-options @vue-macros/volar
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">
defineOptions
({
name
: 'Foo',
inheritAttrs
: false,
})
defineProps
<{
foo
: number
}>() </script> <template> <
Foo
:
foo
="1" />
</template>
Compiled Code
vue
<script lang="ts">
export default {
  
name
: 'Foo',
inheritAttrs
: false,
} </script> <script setup lang="ts">
defineProps
<{
foo
: number
}>() </script> <template> <
Foo
:
foo
="1" />
</template>

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>

Volar Configuration

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // or 2.7 for Vue 2
    "plugins": [
      "@vue-macros/volar/define-options",
      // ...more feature
    ],
  },
}

Contributors

The avatar of contributor named as renovate[bot] renovate[bot]
The avatar of contributor named as zhiyuanzmj zhiyuanzmj
The avatar of contributor named as Kevin Deng Kevin Deng
The avatar of contributor named as gaokefei gaokefei

Changelog