<script setup> should register components by name

[chojnicki]

Previous comment in RFC pull: #227 (comment)

With <script setup> it is impossible to use <component :is=""> with component name as :is.

But it worked fine in v2 and v3 with normal composition api. So I think it should also work with <script setup> syntax and I consider this as a bug. Even if this behavior will be not changed, then it at least should be clarified somewhere in RFC and later docs :)

[LinusBorg]

It's explicitly not designed that way: https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#exposing-components-and-directives

[fxioi]

Hi. Did you find a solution for the component name to be used in <script setup>?

[fxioi]

a solution:

<template>
  <button :class="['text' + size]">size: {{ size }}</button>
</template>

<script lang="ts">
export default { name: "test-btn" };
</script>
<script setup lang="ts">
import { defineProps } from "vue";
import type {PropType} from 'vue'
defineProps({
  size: {
      type: String as PropType<IButtonSize>,
      default: "base"
    }
})
</script>

[chojnicki]

a solution:

Unfortunately not for me because I need this for vite-svg, so I do not have control over component file. But other than that, this workaround sounds promising. Maybe I will fork svg plugin to implement this to test that. Will see. Thanks ;)

[sethidden]

To those reacting with the sad face: this solution is actually an official way of doing what OP needs. It's not some hack https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#declaring-additional-options

[sethidden]

I think this also makes it impossible to get keep-alive to work with script setup components.

Consider this case from here: https://stackoverflow.com/a/65760822/10706046

<router-view v-slot="{ Component }">
  <keep-alive include="MoviesList">
    <component :is="Component" />
  </keep-alive>
</router-view>

If you have a MoviesList.vue file the autogenerated name MoviesList doesn't work. You have to use #273

[sethidden]

Ah, the team foresaw this: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#automatic-name-inference

[Birdknothing]

If you’re using Vue Router and have named each route, you can try this:

routes.forEach(route => route.component().then(mod=>mod.default.name=route.name));

hope this helps 😃

[gslvly]

have to use a plugin:

import { Plugin } from 'vite'
export const setupName = (): Plugin => {
  return {
    name: 'setup-add-name',
    enforce: 'pre',
    transform(code, id) {
      if (!id.endsWith('.vue')) {
        return { code, map: null }
      }
      const match = code.match(/<script\s+.*name=('|")(.+?)('|")/)
      const lang = code.match(/<script\s+.*lang=('|")(.+?)('|")/)
      if (match) {
        return {
          code: code + `<script lang="${lang?.[2]}">export default {name: "${match[2]}"}</script>`,
          map: { mappings: '' },
        }
      }

      return { code, map: null }
    },
  }
}```