Faire fonctionner le tracker sur une application Vue est assez simple.

En supposant que vous construisez une SPA (Single Page Application), tout ce que vous avez à faire est d’ajouter le code suivant à votre script de setup dans votre fichier principal.

<script setup>
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'
//... your code here
tracker.configure({
  projectKey: "<your project key>",
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
//... more code here
</script>

Pour des raisons de sécurité, évitez d’écrire votre projectKey en dur directement dans le code de votre application. Stockez-la plutôt dans un fichier de configuration ou un système d’environnement.

Une option serait d’ajouter une variable d’environnement dans un fichier .env à la racine de votre projet et de préfixer la variable avec VITE_, ce qui la rendra disponible dans votre code Vue. Vous pourrez l’utiliser plus tard avec import.meta.env.<your variable name>.

Voici un exemple :

tracker.configure({
  projectKey: import.meta.env.VITE_VUE_APP_PROJECT_KEY,
});

Si vous construisez une application complexe avec Vue, il y a de fortes chances que vous utilisiez Nuxt ou quelque chose de similaire. N’oubliez pas de consulter notre section Tracker Setup pour trouver le framework avec lequel vous travaillez.

Si vous rencontrez des problèmes pour configurer le tracker sur votre projet Vue, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !