[Vue] Vue 3.3 defineOptions

defineOptions

Previously, if you were using script setup, and you wanted to define some options such as name or inheritAttrs for your component, you would have to create an additional <script> tag just to define those options.

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

Vue 3.3 gives us a new macro defineOptions to define these options within the same <script setup> tag.

<script setup lang="ts">
defineOptions({
  name: 'MyComponent',
  inheritAttrs: false
})
</script>

So there’s no need to create an additional <script> tag for that.

If you want to learn more about the purposes of these options, you can check out the documentation for that.

---

Code

<script setup lang="ts">
import { ref } from 'vue'

defineOptions({
  name: 'MyComponent',
  inheritAttrs: false
})

const borderStyle = ref('2px solid black')
</script>

<template>
  <input class="textbox" />
</template>

<style scoped>
.textbox {
  border: v-bind(borderStyle)
}
</style>