`v-is="component-name" has been deprecated. What is the correct new syntax?

[nikriaz]

I'm referring to the 3.3.4 changelog:
v-is="component-name" has been deprecated. Use is="vue:component-name" instead. v-is support will be removed in 3.4.

My code looks like this:
<component :is='step' />

Tried different options for the new syntax, none of them work.
Like this:
<component "vue:'step'" />

Getting runtime error
[plugin:vite:vue] Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<).

[mzgajner]

Looks like it works as expected on native elements. Doesn't work on <component> though, perhaps that entire thing was deprecated along with :is 🤷‍♀️.

[nikriaz]

I see, v-is is completely deprecated in favor of native is. But I still can't figure out how to make it work when the component name is a reactive variable, as it's supposed to be for dynamic components.

<div is="vue:'step'" /> doesn't work. Component name is resolved as 'step' (hard-coded string, including quotes). Same with variable name without quotes or with double quotes.
<div is="step" /> just doesn't work and probably shouldn't

[adoin]

Does

 <conponent is="vue:step" />

works?

[mzgajner]

No - example. But if you change component to div, it starts working.

[nikriaz]

No, it doesn't,
[Vue warn]: Failed to resolve component: step

I actually gave up. v-is is deprecated but still work till 3.4. I hope they will give us some guidance how to handle it then.

[JackYoungCom]

try this:
<div is="vue:step" ></div>
or:
<component :is="step"></component>
if you want to change built-in special component, use ":is", and if you want to change native elements, use "is".