21

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>

4 Answers 4

31

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>
  1. 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>
4
  • Is there a more elegant way to define a component name? Feb 8, 2022 at 12:51
  • 3
    @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.
    – Wenfang Du
    Feb 9, 2022 at 9:01
  • 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.
    – abalikai
    Nov 27, 2022 at 23:52
  • 1
    Link to the docs: vuejs.org/api/…
    – Denxorz
    Nov 29, 2022 at 9:28
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>
-1

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

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>
4
  • This did not work for me.
    – Joe Maffei
    Aug 11, 2022 at 18:29
  • @JoeMaffei please check my code now, I've tested this one and this worked for me
    – Farid
    Aug 12, 2022 at 9:18
  • The code you provided isn't inside the setup script, but your answer says we can.
    – SamHoque
    Nov 11, 2022 at 10:34
  • sure, This way is for using setup script and typescript @SamHoque
    – Farid
    Nov 12, 2022 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.