Using OpenReplay with Vue

Getting the tracker to work on a Vue application is quite straightforward.

Assuming you’re building a SPA (Single Page Application), all you have to do, is to add the following code to your setup script in your main file.

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

For security reasons, avoid hardcoding your projectKey directly in your application code. Instead, store it in a configuration file or environment system.

One option would be to add an environment variable into a .env file in the root of your project and prefix the variable with VITE_, that will make it available to you in your Vue code. You can use it later using import.meta.env.<your variable name>.

Here is an example:

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

If you’re building a complext applicaton with Vue, chances are you’re using Nuxt or something like it. Make sure to check out our Tracker Setup section to find the framework you’re working with.

If you have any issues setting up the tracker on your Vue project, please reach out to us on our Slack community and ask our devs directly!