Intermediate LevelVue JS
How does the defineOptions() macro set component options like name and inheritAttrs in <script setup>?
❓ Interview Prompt: Explain defineOptions() compiler macro (Vue 3.3+), setting component names, disabling inheritAttrs, and custom options.
Historically, setting component options like 'name' or 'inheritAttrs: false' in '<script setup>' required writing a separate secondary '<script>' block.
'defineOptions()' (Vue 3.3+):
The 'defineOptions()' compiler macro allows setting component-level options directly inside '<script setup>'!
Code Implementation Example
html
<script setup>
// Vue 3.3+ defineOptions compiler macro
defineOptions({
name: 'CustomButton',
inheritAttrs: false // Prevent automatic attribute fallthrough to root element!
});
</script>
<template>
<div class="button-wrapper">
<button v-bind="$attrs"><slot /></button>
</div>
</template>💡Setting component name and inheritAttrs using defineOptions macro.
🎯 Interview Key Takeaway
Use defineOptions() in Vue 3.3+ to set component options like name and inheritAttrs inside <script setup>.
#defineOptions#script setup#Vue 3.3#Intermediate
Back to all Vue JS Questions→