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

Question

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>

Catatonia

Answer 1

With Vue ^3.3, you can now use defineOptions() directly:

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

---

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, there're two ways:

1. If using Vue Macros, you can use defineOptions(), this might be the most succinct approach:

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

2. If you don't want to rely on external libraries, you can 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>

Catatonia

Is there a more elegant way to define a component name? – Comanche

@AlexanderKim When you use Single-File Components, the component already infers its name from the filename, the name option allows you to override the inferred name, I don't know if there's any other way. – Catatonia

I think the most elegant solution is to just rename the component file name. e.g., instead of Header.vue, rename it MainHeader.vue, or HeaderView.vue. You may have some refactoring, but there would be no need for a separate <script> tag. – Malleable

Link to the docs: vuejs.org/api/… – Remde

Answer 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>

Ajax

Answer 3

You can use defineComponent like this if you want to use setup script and typescript:

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

In Vue 3.3 and later, You can define defineOptions inside setup script:

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

Machuca

This did not work for me. – Oxley

@JoeMaffei please check my code now, I've tested this one and this worked for me – Machuca

The code you provided isn't inside the setup script, but your answer says we can. – Coronet

sure, This way is for using setup script and typescript @Coronet – Machuca

Answer 4

You can use unplugin-vue-define-options to define options API within <script setup>

<script lang="ts" setup>
import { computed } from "vue";
import { useWindowScroll } from "@vueuse/core";

defineOptions({ name: "BackToTop" });

const { y: scrollY } = useWindowScroll();

const show = computed(() => scrollY.value > 180);
</script>

Kenwood