Настроить работу трекера в приложении Vue довольно просто.

Предполагая, что вы создаёте SPA (Single Page Application), всё, что вам нужно сделать, — это добавить следующий код в ваш скрипт setup в главном файле.

<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>

В целях безопасности избегайте жёсткого прописывания вашего projectKey непосредственно в коде приложения. Вместо этого храните его в файле конфигурации или в системе окружения.

Один из вариантов — добавить переменную окружения в файл .env в корне вашего проекта и снабдить её префиксом VITE_, что сделает её доступной в вашем коде Vue. Позже вы сможете использовать её через import.meta.env.<your variable name>.

Вот пример:

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

Если вы создаёте сложное приложение на Vue, скорее всего, вы используете Nuxt или что-то подобное. Обязательно загляните в наш раздел Tracker Setup, чтобы найти фреймворк, с которым вы работаете.

Если у вас возникнут какие-либо проблемы с настройкой трекера в вашем проекте Vue, свяжитесь с нами в нашем сообществе Slack и задайте вопрос напрямую нашим разработчикам!