feat: update composition-api-faq.md (#2370)

* feat: inheritAttrs in defineOptions

* feat: update composition-api-faq.md

* Apply suggestions from code review

Co-authored-by: Natalia Tepluhina <[email protected]>

---------

Co-authored-by: Natalia Tepluhina <[email protected]>

src/api/options-misc.md

@@ -102,6 +102,27 @@ Controls whether the default component attribute fallthrough behavior should be
  </template>
  ```
 
+ Since 3.3 you can also use `defineOptions` directly in `<script setup>`:
+
+ ```vue
+ <script setup>
+ defineProps(['label', 'value'])
+ defineEmits(['input'])
+ defineOptions({ inheritAttrs: false })
+ </script>
+
+ <template>
+ <label>
+ {{ label }}
+ <input
+ v-bind="$attrs"
+ v-bind:value="value"
+ v-on:input="$emit('input', $event.target.value)"
+ />
+ </label>
+ </template>
+ ```
+
  </div>
 
 - **See also:** [Fallthrough Attributes](/guide/components/attrs)

src/guide/components/attrs.md

@@ -92,6 +92,17 @@ export default {
 <script setup>
 // ...setup logic
 </script>
+```
+
+ Since 3.3 you can also use `defineOptions` directly in `<script setup>`:
+
+```vue
+<script setup>
+defineOptions({
+ inheritAttrs: false
+})
+// ...setup logic
+</script>
 ```
 
 </div>

src/guide/extras/composition-api-faq.md

@@ -108,6 +108,12 @@ Options API does allow you to "think less" when writing component code, which is
 
 Yes in terms of stateful logic. When using Composition API, there are only a few options that may still be needed: `props`, `emits`, `name`, and `inheritAttrs`. If using `<script setup>`, then `inheritAttrs` is typically the only option that may require a separate normal `<script>` block.
 
+:::tip
+
+Since 3.3 you can directly use `defineOptions` in `<script setup>` to set the component name or `inheritAttrs` property
+
+:::
+
 If you intend to exclusively use Composition API (along with the options listed above), you can shave a few kbs off your production bundle via a [compile-time flag](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) that drops Options API related code from Vue. Note this also affects Vue components in your dependencies.
 
 ### Can I use both APIs together? {#can-i-use-both-apis-together}