Commit 01689280 authored by David O'Regan's avatar David O'Regan Committed by Denys Mishunov

Add Vue i18n docs

parent 63db21c1
......@@ -138,7 +138,90 @@ const label = __('Subscribe');
```
In order to test JavaScript translations you have to change the GitLab
localization to other language than English and you have to generate JSON files
localization to another language than English and you have to generate JSON files
using `bin/rake gettext:po_to_json` or `bin/rake gettext:compile`.
### Vue files
In Vue files we make both the `__()` (double underscore parenthesis) function and the `s__()` (namespaced double underscore parenthesis) function available that you can import from the `~/locale` file. For instance:
```javascript
import { __, s__ } from '~/locale';
const label = __('Subscribe');
const nameSpacedlabel = __('Plan|Subscribe');
```
For the static text strings we suggest two patterns for using these translations in Vue files:
- External constants file:
```javascript
javascripts
└───alert_settings
constants.js
└───components
alert_settings_form.vue
// constants.js
import { s__ } from '~/locale';
/* Integration constants */
export const I18N_ALERT_SETTINGS_FORM = {
saveBtnLabel: __('Save changes'),
};
// alert_settings_form.vue
import {
I18N_ALERT_SETTINGS_FORM,
} from '../constants';
<script>
export default {
i18n: {
I18N_ALERT_SETTINGS_FORM,
}
}
</script>
<template>
<gl-button
ref="submitBtn"
variant="success"
type="submit"
>
{{ $options.i18n.I18N_ALERT_SETTINGS_FORM }}
</gl-button>
</template>
```
When possible, you should opt for this pattern, as this allows you to import these strings directly into your component specs for re-use during testing.
- Internal component `$options` object `:
```javascript
<script>
export default {
i18n: {
buttonLabel: s__('Plan|Button Label')
}
},
</script>
<template>
<gl-button :aria-label="$options.i18n.buttonLabel">
{{ $options.i18n.buttonLabel }}
</gl-button>
</template>
```
In order to visually test the Vue translations you have to change the GitLab
localization to another language than English and you have to generate JSON files
using `bin/rake gettext:po_to_json` or `bin/rake gettext:compile`.
### Dynamic translations
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment