SB Components with underscores not rendered in Nuxt/Vue

[uuf6429]

What I tried:

• forked the demo at https://stackblitz.com/edit/nuxt-3-sdk-demo
• connected it to my account (by updating the auth key)
• tried it out with the default call_to_action SB components, but it didn't work(*)
• so I tried it my own custom SB component called "bold", and that worked

(*) tried creating vue/nuxt component named CallToAction.vue, call_to_action.vue and other variants

After some digging, I think the problem is basically here:

storyblok-vue/lib/StoryblokComponent.vue

Line 2 in c8dee1c

<component :is="blok.component" v-bind="{ ...$props, ...$attrs }"></component>

From my understanding, SB does not allow component names with dashes, while on the other hand Vue/Nuxt does not like components with underscores.

So my (perhaps naive) suggestion would be to replace the code above with (which replaces underscores with dashes):

  <component :is="blok.component.replace(/_/g, '-')" v-bind="{ ...$props, ...$attrs }"></component>

[bootsmann1995]

I'm runnig in to the same issue, is there a roadmap on when this is fixed?

[alvarosabu]

Hi, @uuf6429 and @bootsmann1995 sorry that it took so long to get answered, I would ask if this issue is still valuable so I can prioritize it.

Thanks

[uuf6429]

We gave up on that a long time ago and switched to a PHP implementation.

[alvarosabu]

Sorry to hear that @uuf6429

[reneroth]

Hi, @uuf6429 and @bootsmann1995 sorry that it took so long to get answered, I would ask if this issue is still valuable so I can prioritize it.

Thanks

+1 from me, this bug caused issues for me before, would be grateful for a fix.

We gave up on that a long time ago and switched to a PHP implementation.

my condolences 😛