Writing keys
Write keys inside your project using Dico.app Client
Writing keys with dico is easy! Let's see how:
Our First Key
To write keys we need to import $dico from the file where we inited our client in the previous step.
We can then write keys inside our project using it directly:
import { $dico } from "~/dico";
console.log($dico.myFirstCollection.hello);
import { $dico } from "~/dico";
export function MyComponent() {
return (
<div>
{ `${$dico.myFirstCollection.hello}` }
</div>
);
}
<template>
<div>
{{ $dico.myFirstCollection.hello }}
</div>
</template>
<script>
import { useDico } from "./dico";
export default {
setup() {
const { $dico } = useDico();
return { $dico };
}
};
</script>
As you can see creating keys and collections is straightforward: simply access it within the $dico object like if they were always here:
- If the key has been filled within your dico on ui.dico.app then its value is displayed;
- If it has not been filled, then a placeholder value gets displayed, allowing you to keep working on your project without worrying about getting content in.
💡 As your dico grows and you start filling keys inside it you'll notice that intellisense when accessing $dico will get just better!
Our First Collection
Let's say we want to create keys for a login form component.
We want a key for the email label, the email placeholder, the password label, the password placeholder, and the login button.
We want those keys to be available within a collection located at my-dico.form.login.
It'll then go like this:
import { $dico } from "~/dico";
export function LoginForm() {
return (
<form>
<label>
{ `${$dico.form.login.emailLabel}` }
<input type="email" placeholder={ $dico.form.login.emailPlaceholder } />
</label>
<label>
{ `${$dico.form.login.passwordLabel}` }
<input type="password" placeholder={ $dico.form.login.passwordPlaceholder } />
</label>
<button type="submit">
{ `${$dico.form.login.submitLabel}` }
</button>
</form>
);
}
<template>
<form>
<label>
{{ $dico.form.login.emailLabel }}
<input type="email" :placeholder="$dico.form.login.emailPlaceholder" />
</label>
<label>
{{ $dico.form.login.passwordLabel }}
<input type="password" :placeholder="$dico.form.login.passwordPlaceholder" />
</label>
<button type="submit">
{{ $dico.form.login.submitLabel }}
</button>
</form>
</template>
<script>
import { useDico } from "./dico";
export default {
setup() {
const { $dico } = useDico();
return { $dico };
}
};
</script>
This will create the above keys at the desired location.
Internationalization
When initing your client you also get the $dicoI18n object.
This object can be used to control the locale in which your dico is displayed:
import { $dico, $dicoI18n } from "~/dico";
$dicoI18n.setLocale($dicoI18n.locales["fr-fr"]);
// Values from `$dico` are now displayed in French...
Common Mistakes
Importing $dico
Make sure you import $dico as $dico, using another name for it won't work.
Using $dico
When accessing $dico you cannot perform any fancy JavaScript operation on it.
Keys have to be camelCase and accessed directly. For example, this won't work:
const key = "hello";
console.log($dico.myFirstCollection[key]);
Woo! We went through a lot. Once you're done writing your keys, you can head to pushing your keys to Dico.app ->