Using OpenReplay with Vue

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

While you can get a copy&paste version of the code directly from the platform when you create a new project, that code is too barebone and will make it a lot harder to customize and add extra plugins.

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>
//... your code here
const tracker = new Tracker({
  projectKey: "<your project key>"
});

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

As a note, the projectKey that you configure is the one provided by OpenReplay’s platform. This value should not be stored hardcoded in your code for security reasons, but rather on some kind of configuration file/sytem.

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>. Like this:

const tracker = new Tracker({
  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 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!