search

intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.19k stars 335 forks source link

Define components in PascalCase #829

Closed wopian closed 7 months ago

wopian commented 2 years ago

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

santiagoarizti commented 2 years ago

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 commented 2 years ago

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

kazupon commented 7 months ago

close, already supported. https://github.com/intlify/vue-i18n-next/blob/fea409da93bb9b367e5eb2f909afad23366507cc/packages/vue-i18n/src/vue.d.ts#L1275-L1277

wopian commented 6 months ago

Thank you for adding support for this! Fixed by https://github.com/intlify/vue-i18n-next/pull/1313