Skip to content

Commit 499701b

Browse files
committed
chore(l10n): update l10n readme
Signed-off-by: John Molakvoæ <[email protected]>
1 parent e65bd92 commit 499701b

File tree

1 file changed

+52
-1
lines changed

1 file changed

+52
-1
lines changed

README.md

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,58 @@ If you want to work on improving the components it’s best to run the latest co
5252
- In the repository of an app do `npm link @nextcloud/vue` (you need to re-link any time you do `npm ci` in the app)
5353
4. Then build the app with: `npm run build` (or watch for changes with `npm run watch`)
5454

55-
### Styleguide
55+
## Translations
56+
57+
This library uses translated strings.
58+
When you edit/create a translated string, you need to run `npm run l10n:extract` to update the source files.
59+
Our awesome translation community will then be notified and a bot will sync those changes automatically.
60+
61+
Nonetheless, it requires a bit of caution.
62+
When you implement a translated string, import the `translate` or `translatePlural` and add it in your methods like so:
63+
```vue
64+
<template>
65+
<element>
66+
{{ t('Choose') }}
67+
</element>
68+
</template>
69+
70+
<script>
71+
import { translate as t } from '@nextcloud/l10n'
72+
73+
export default {
74+
methods: {
75+
t,
76+
},
77+
}
78+
</script>
79+
```
80+
81+
Please note that using a translated string as an attribute will _NOT_ work.
82+
But it will work if it's within an element (like the example above)
83+
```vue
84+
<template>
85+
<element :prop="t('This will not work')" />
86+
</template>
87+
```
88+
89+
You will instead have to define the string in the data section and use the relevant variable reference.
90+
```vue
91+
<template>
92+
<element :prop="chooseProp" />
93+
</template>
94+
95+
<script>
96+
export default {
97+
data() {
98+
return {
99+
chooseProp: t('Choose'),
100+
},
101+
}
102+
}
103+
</script>
104+
```
105+
106+
## Styleguide
56107

57108
When developing new components or extending compnents, make sure to also have some bits of related documentation like examples, where applicable.
58109
To test components and the documentation in that context, you can run `npm run styleguide` to run a local server that serves the style guide

0 commit comments

Comments
 (0)