Define components in PascalCase

[wopian]

trafficstars

Clear and concise description of the problem

Currently vue-i18n@next only exposes components as kebab-case, which is in direct conflict with our ESLint rules which forbid kebab-case component names.

PascalCase cannot be used if components are defined as kebab-case, so we're currently having to ignore this rule for i18n's component names.

Related to https://github.com/kazupon/vue-i18n/issues/1196 in the Vue 2 repo

Suggested solution

Define components as PascalCase. This allows consumers to use either PascalCase or kebab-case in their templates as PascalCase supports both usages and would not be a breaking change - see https://v3.vuejs.org/guide/component-registration.html#name-casing for details

Alternative

No response

Additional context

// .eslintrc.js
export default {
  ...,
  rules: {
	...,
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      { registeredComponentsOnly: false, ignores: ['i18n-t'] }
    ],
  }
}

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[santiagoarizti]

Hi, what about importing the component like this:

import {I18nT, useI18n} from 'vue-i18n';

This would allow you to use the pascal case name, plus you get intellisense/autocomplete,

I started this discussion here

[Miguel-Bento-Github]

Hi, what about importing the component like this:

import {I18nT, useI18n} from 'vue-i18n';

This would allow you to use the pascal case name, plus you get intellisense/autocomplete,

I started this discussion here

Component registration can be global, it'd be better to have multiple Translation component names at
https://github.com/intlify/vue-i18n-next/blob/master/packages/vue-i18n-core/src/components/Translation.ts#L83