Vite - Docs — Dico.app

This guide assumes you already have common knowledge about Dico.app from the getting started section.

Once you have installed the client on your project, it might appear to you that dico feels a bit too magical to work perfectly out of the box.

Let's make it a little less magical by creating a composable for your project.

Start updating your dico.js content as follows:

src/dico.(js|ts)

import { reactive } from "vue";

import { createDico } from "@dico/client";
import data from "../dico.data.json";

export const { $dico, $dicoI18n } = createDico(data);

export const useDico = () => {
    return {
        $dico: $dico,
        $dicoI18n: reactive($dicoI18n)
    };
};

Notice that we only make $dicoI18n reactive, the reason for that is that the $dico object is already reactive to $dicoI18n and doesn't need to be reactive to anything else as you cannot set its value.

From here you can then use your new composable inside Vue components:

src/**/*.vue

<template>
    <div> {{ $dico.myFirstCollection.hello }} | {{ $dicoI18n.currentLocale }}</div>
    <button @click="$dicoI18n.setLocale($dicoI18n.locales['en-us'])">en-us</button>
    <button @click="$dicoI18n.setLocale($dicoI18n.locales['fr-fr'])">fr-fr</button>
</template>

<script>
import { useDico } from "./dico";

export default {
    setup() {
        const { $dico, $dicoI18n } = useDico();

        return { $dico, $dicoI18n };
    }
};
</script>

You're done! You can check out the example repository of that project ->

Alternatively you can also go further by browser the references for the CLI and the client ->