Fix: vue2 components naming

[samijaber]

Description

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mitosis-fiddle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2023 2:18pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f31e4c0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 4 targets

• nx build @builder.io/mitosis-fiddle
• nx run-many --skip-nx-cache --target build --parallel 4 --exclude */e2e-alpine,*/e2e-angular,@builder.io/mitosis-fiddle,@builder.io/talk-*,@builder.io/example-apps
• nx build @builder.io/eslint-plugin-mitosis
• nx build @builder.io/mitosis

---

Sent with 💌 from NxCloud.

[kingzez]

@samijaber Hi~, I don't understand why this is changed, can you explain why?

[samijaber]

We were already transforming all component names in the <template> logic to kebab-case, but we were not doing that transformation in the components export inside <script>.

This was fine because Vue does a transformation in the background, and lets you call the same component using kebab-case or camelCase syntax. But, I found a bug where this broke for single-word component names, like Block. It would get exported as components: { Block }, but the usage would be <template> <block /> </template>, which actually does not work.

So this makes everything consistent between imports and usages.