Using OpenReplay with Vue
Getting the tracker to work on a Vue application is quite straightforward.
Adding the tracking code
Section titled Adding the tracking codeWhile 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>Handling the “projectKey” in your code
Section titled Handling the “projectKey” in your codeAs 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,
});Building something more complex?
Section titled Building something more complex?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.
Have questions?
Section titled Have questions?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!
