'How to define `name` and `inheritAttrs` in `<script setup>`?

Options API:

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'CustomName', // 👈
    inheritAttrs: false, // 👈
    setup() {
      return {}
    },
  })
</script>

How to do that in <script setup>, is there an equivalent for name and inheritAttrs like defineProps and defineEmits?

<script setup>
  // 👉 how to define them here?
</script>

Solution 1:^[1]

The <script setup> syntax provides the ability to express equivalent functionality of most existing Options API options except for a few:

name
inheritAttrs
Custom options needed by plugins or libraries

If you need to declare these options, use a separate normal <script> block with export default:

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
  }
</script>

<script setup>
  // script setup logic
</script>

Compiled output:

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
    setup() {
      // script setup logic
    },
  }
</script>

Solution 2:^[2]

there is a vite plugin vite-plugin-vue-setup-extend can resolve set component name.

config

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

usage

<script lang="ts" setup name="CompName">
</script>

Solution 3:^[3]

You can use defineComponent inside your setup

<script setup lang="ts">
defineComponent({
  inheritAttrs: false,
});
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	YAN7
Solution 3	Farid

'How to define `name` and `inheritAttrs` in `<script setup>`?

Solution 1:[1]

Solution 2:[2]