Vue.js Analytics

Integrating Proxima Analytics into your Vue application is a simple process that can be done by adding the Proxima Analytics script to the `index.html` file, which is typically used as the entry point for your application and located in the root directory of your Vue project. By including the Proxima Analytics script in this file, it will be loaded as soon as the page is loaded, allowing Proxima Analytics to start tracking immediately.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      defer
      data-manual
      data-site="YOUR_SITE_ID"
      src="https://buzz.proxima.so/script.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Using the Proxima Analytics Client

To enhance the integration of Proxima Analytics in your Vue application, you can also leverage the power of the Proxima client library. The library is designed to make it easy for you to load the Proxima script dynamically, so you can have more control over the monitoring of your application.

One way to do this is to create a Vue component and include the following code. By using the `mounted` lifecycle hook, you can call the `init` method once the component is mounted. In this method, you can then initialize the Proxima client with your site ID, which will start monitoring your application.

import * as client from '@prxm/client';

export default {
  async mounted() {
    await this.init()
  },
  methods: {
    init() {
      client.init({
        site: 'YOUR_SITE_ID',
      });
    }
  }
}