Invalid component name error for valid name that uses unicode characters

[youngrok]

Version

2.5.16

Reproduction link

https://jsfiddle.net/50wL7mdz/536596/

Steps to reproduce

1. register component with unicode component name. ex: my-컴포넌트
2. use it in template. ex: <my-컴포넌트></my-컴포넌트>
3. Vue warn is logged and component is not rendered.

What is expected?

No error, no warning. The component should be rendered properly.

What is actually happening?

The component is not rendered with this warning.

[Vue warn]: Invalid component name: "my-컴포넌트". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

---

Component-Names in Vue Guide says,

we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen)

However, W3C rules allow lots of unicode characters for component name. I think these two rules are important:

• They start with a lowercase ASCII letter, ensuring that the HTML parser will treat them as tags instead of as text.
• They do not contain any uppercase ASCII letters, so user agents can always treat HTML elements ASCII-case-insensitively.

The rules prevent using uppercase ASCII letters, and does not force using only lowercase ASCII letters. They allow unicode characters, but Vue.js doesn't accept unicode component names.

Furthermore, the error level is not error but warn, but it doesn't work in some cases like using it as custom element in template. It works when routed by vue router.

[youngrok]

I think two points should be fixed. First, html parser allows all XML QName.

vue/src/compiler/parser/html-parser.js

Line 19 in 21112ec

const ncname = '[a-zA-Z_][\\w\\-\\.]*'

Second, validateComponentName allows all PotentialCustomElementName.

vue/src/core/util/options.js

Line 256 in 21112ec

if (!/^[a-zA-Z][\w-]*$/.test(name)) {

[Justineo]

Hi, can you elaborate on your use case for this feature? We want to make sure the feature is not just for achieving maximum flexibility while lacks real use case.

we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen)

As I understand, by mentioning the spec about custom tag names we actually want to apply more restrictions here. And in fact you can tell this intention from the warning message already:

Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

Technically a subset of HTML is still HTML-compliant so applying extra restrictions like this won't break the standard.

[youngrok]

Hi, let me explain my cases. I'm working on tax reporting software in Korea. So many items are required for tax reporting, and so many terms are used in those items, and they are all Korean.

For the first time I tried to translate all the terms to English, but failed because some don't have standard translation, some have same translation but different meaning, some have subtle difference of meaning, and so on. And it wasn't efficient to translate all of them.

Therefore, I changed my mind to use the Korean terms as they are, and this new way works for server side and dbms perfectly. It also works for plain javascript. However, vue.js doesn't support unicode names in some cases, so I want to make it work.

I think my case is not so rare case. Lots of developers want to use there native language in code especially when developing software that uses many complicated terms.

Technically a subset of HTML is still HTML-compliant so applying extra restrictions like this won't break the standard.

I understand. You're right. Then what I need is not a fix, but an improvement.

[posva]

It's funny because I am on the same page as @Justineo but I faced that problem as well in French projects and used French terms for things that cannot or are very difficult to be translated. The only difference is that I can just ignore accents and ç and use plain letters

[youngrok]

How is it going? Could you tell me whether this issue would be accepted or not?

[yyx990803]

Closed via #8666 - thanks for the contribution!

[42mypark]

Hi, I'm a student learning vuejs as my first framework. I want to use my component name in my language.I read what you commented on 27 jul 2018. but I don't understand about that. I don't have these files 'vue/src/compiler/parser/html-parser.js' and ' vue/src/core/util/options.js'.

I installed and setup vue this commend
** npm install -g @vue/cli
** vue create frontend

what should I do? I really want to use component name in my language. please give me your help.
@youngrok