use <script setup name="cpnName"> instead of two <script>

[gumingWu]

What problem does this feature solve?

When I create a component vue file,I will write two script in it,first script maintain the component name,sceond script use script setup syntax,I think it need to be optimized
E.g
before

<script> export default { name: 'ChildCpn' } </script>

after

<script setup name="ChildCpn"></script>

so cool~

What does the proposed API look like?

<script setup name="ChildCpn">

[edison1105]

This might be a good feature.
same as #4997 (comment)

[sxzz]

I'm trying to switch Element Plus to script-setup syntax, but this problem is blocking us. As a 3rd party component, we should add a prefix to component name, so we should add name property for every Vue SFC. If I use script-setup, there's two script tags at the same time. I think it's too ugly and seems to be incompatible with some cases. (such as 已声明“defineComponent”，但从未读取其值。ts(6133))

IMHO, Maybe Vue can provide a marco API called defineOptions. It can set some Options API (name, inheritAttrs...).

Example:

<script setup lang="ts">
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})

defineProps<Props>()
// ...
</script>

and it transforms to

<script lang="ts">
export default {
  name: 'Foo',
  inheritAttrs: false,
}
</script>

<script lang="ts" setup>
defineProps<Props>()
// ...
</script>

Related issue: element-plus/element-plus#5709 (comment)

UPDATE:
I made a plugin unplugin-vue-define-options to implement this feature

RFC

[Tofandel]

I think I like this proposal better than defineOptions, if <script> behaves like a vue component that accepts props like options that would be amazing, then we could pass options like

<script setup :inerit-attrs="false" name="MyComponent" layout="a custom option">

[joezimjs]

They wrongly closed #5633 as a duplicate of this, so I'm putting this here so it doesn't just disappear and because it's related enough to be in here anyway.

I saw some people on Twitter that noted Vue's general usage of default exports for all components. Some people, and myself to an extent, think that named exports are a better practice, but I love <script setup> too much to give it up for named exports.

So I was thinking about enhancing <script setup> with an additional attribute: name (or namedExport or something like that). We can use it to specify the name it'll be exported as. I originally thought about using it for both the export name and the component name (like you're asking for in this issue, hence using the name attribute), but I think people should be able to set a component name without being required to opt into named exports. So let's assume I'm going to use the namedExport attribute instead of just name so we're not clashing:

E.g.

<script setup namedExport="MyComponent">
// ...
</script>

Would compile to

export const MyComponent = {
    // ...
}

If we want to simplify and combine these attributes into a cohesive bunch we can use name to set the component name and usenamedExport without assigning a value (as if it's a boolean) to indicate that we want to use a named export without having to retype the name of the component:

E.g.

<script setup name="MyComponent" namedExport>
// ...
</script>

Would compile to

export const MyComponent = {
    name: "MyComponent",
    // ...
}

So if you don't want to set a component name, or if you want the exported name and the component name to be different, set namedExport to something, otherwise just use namedExport without a value to get it to derive the name from a name attribute if it exists, or the file name.

<script setup name="ParentGroup.ChildComponent" namedExport="ChildComponent">
// ...
</script>

Would compile to

export const ChildComponent = {
    name: "ParentGroup.ChildComponent",
    // ...
}

[jzfai]

When does the official plan to add this function?

#5758

[chencheng365]

When does the official plan to add this function?
This feature is very much needed in the project

[sxzz]

I made a plugin unplugin-vue-define-options to implement this feature, if you really need it.

[gumingWu]

NOW! I have the new ideas, if I want to write the JSX in <script setup>, maybe vue can supply a new API, like defineTemplate

E.g.

<script lang="ts">
setup() {
    return () => (
        <div></div>
    )
}
</script>

——————

<script setup>
const msg = ref('hi')
defineTemplate(() => (
    <div>{{ msg }}</div>
))
</script>

use this API, the file just need one label