eslint-plugin-vue-i18n

Appearance

@intlify/vue-i18n/no-deprecated-i18n-place-attr ​

disallow using deprecated place attribute (Removed in Vue I18n 9.0.0+)

  • ⭐ The "extends": "plugin:@intlify/vue-i18n/recommended" or *.configs["flat/recommended"] property in a configuration file enables this rule.

If you are migrating from Vue I18n v8 to v9, the place attribute should be replaced with the v-slot.

📖 Rule Details ​

This rule reports use of deprecated place attribute (Removed in Vue I18n 9.0.0+).

👎 Examples of incorrect code for this rule:

vue
<script>
/* eslint @intlify/vue-i18n/no-deprecated-i18n-place-attr: 'error' */
</script>
<template>
  <div class="app">
    <i18n path="info" tag="p">
      <!-- ✗ BAD -->
      <span place="limit">{{ changeLimit }}</span>
      <!-- ✗ BAD -->
      <a place="action" :href="changeUrl">{{ $t('change') }}</a>
    </i18n>

    <!-- Also check the <i18n-t> component to prevent mistakes. -->
    <i18n-t path="info" tag="p">
      <!-- ✗ BAD -->
      <span place="limit">{{ changeLimit }}</span>
      <!-- ✗ BAD -->
      <a place="action" :href="changeUrl">{{ $t('change') }}</a>
    </i18n-t>
  </div>
</template>

👍 Examples of correct code for this rule:

vue
<script>
/* eslint @intlify/vue-i18n/no-deprecated-i18n-place-attr: 'error' */
</script>
<template>
  <div class="app">
    <i18n path="info" tag="p">
      <!-- ✓ GOOD -->
      <template v-slot:limit>
        <span>{{ changeLimit }}</span>
      </template>
      <!-- ✓ GOOD -->
      <template v-slot:action>
        <a :href="changeUrl">{{ $t('change') }}</a>
      </template>
    </i18n>

    <i18n-t keypath="info" tag="p">
      <!-- ✓ GOOD -->
      <template #limit>
        <span>{{ changeLimit }}</span>
      </template>
      <!-- ✓ GOOD -->
      <template #action>
        <a :href="changeUrl">{{ $t('change') }}</a>
      </template>
    </i18n-t>
  </div>
</template>

📚 Further reading ​

🚀 Version ​

This rule was introduced in @intlify/eslint-plugin-vue-i18n v0.11.0

🔍 Implementation ​