vue-i18n/no-raw-text

disallow to string literal in template or JSX

  • ⭐️ The "extends": "plugin:vue-i18n/recommended" property in a configuration file enables this rule.

This rule warns the usage of string literal.

This rule encourage i18n in about the application needs to be localized.

📖 Rule Details

👎 Examples of incorrect code for this rule:

template option:

export default {
  // ✗ BAD
  template: '<p>hello</p>'
  // ...
}

template block of single-file components:

<template>
  <!-- ✗ BAD -->
  <p>hello</p>
</template>

JSX:

export default {
  // ✗ BAD
  render: h => (<p>hello</p>)
  // ...
}

👍 Examples of correct code for this rule:

template option:

export default {
  // ✓ GOOD
  template: `<p>{{ $('hello') }}</p>`
  // ...
}

template block of single-file components:

<template>
  <!-- ✓ GOOD -->
  <p>{{ $t('hello') }}</p>
</template>

JSX:

export default {
  // ✓ GOOD
  render: h => (<p>{this.$t('hello')}</p>)
  // ...
}

⚙️ Options

{
  "vue-i18n/no-raw-text": ["error", {
    "ignoreNodes": ["md-icon", "v-icon"],
    "ignorePattern": "^[-#:()&]+$",
    "ignoreText": ["EUR", "HKD", "USD"]
  }]
}
  • ignoreNodes: specify nodes to ignore such as icon components
  • ignorePattern: specify a regexp pattern that matches strings to ignore
  • ignoreText: specify an array of strings to ignore