Adding to your Vue.js website

Return to the docs

Vue.js is a popular framework for building web applications.

💡 The following component source-code is using the Composition API, available with Vue 3, 2.7, or 2.6 with Composition API package.

Create a new component called CyanStatsTracker.vue at your preferred component location. In this brand new component, paste the code below and save.

// CyanStatsTracker.vue

<template>
  <div class="cyanstats" />
</template>

<script setup lang="ts">
import { useAnalyticStore } from '@/domain/store';
import { useMaskEmail } from '@/use/maskEmail';

interface Props {
  token?: string;
}

const props = defineProps<Props>();
const IS_DEV = process.env.NODE_ENV === 'development';

const store = useAnalyticStore();

const setVisitorAttributes = () => {
  if (store.user && window.cyanstats) {
    window.cyanstats.visitor.set({
      email: useMaskEmail(store.user.email as string),
      name: `${store.user.firstName} ${store.user.lastName}`,
      cyanStatsID: store.user.id
    });
  }
};

const onLoadHandler = () => {
  setVisitorAttributes();
};

const onErrorHandler = () => {
  console.log('Cyan Stats failed to load!');
};

if (typeof window !== 'undefined') {
  const script = document.createElement('script');

  script.src = IS_DEV ? 'http://localhost:3000/cs.js' : 'https://cyanstats.com/cs.js';
  script.async = true;
  script.setAttribute('id', 'cstag');
  script.onload = onLoadHandler;
  script.onerror = onErrorHandler;

  if (props.token) {
    script.setAttribute('data-token', props.token);
  }

  if (!document.getElementById('cstag')) {
    document.head.appendChild(script);
  }
}
</script>

// CyanStatsTracker.vue

<template>
  <div class="cyanstats" />
</template>

<script setup lang="ts">
interface Props {
  token?: string;
}

const props = defineProps<Props>();

const onLoadHandler = () => {
  console.log('Cyan Stats is loaded!');
};

const onErrorHandler = () => {
  console.log('Cyan Stats failed to load!');
};

if (typeof window !== 'undefined') {
  const script = document.createElement('script');

  script.src = 'https://cyanstats.com/cs.js';
  script.async = true;
  script.setAttribute('id', 'cstag');
  script.onload = onLoadHandler;
  script.onerror = onErrorHandler;

  if (props.token) {
    script.setAttribute('data-token', props.token);
  }

  if (!document.getElementById('cstag')) {
    document.head.appendChild(script);
  }
}
</script>

Next, import the newly created component into the App.vue or any other file that fits better. The file you’re gonna import CyanStatsTracker into depends on how your project is organized.

E.g. 👇

// App.vue

<template>
// App.vue

<template>
  <section id="app">
    <!-- YOUR APP -->
    <CyanStatsTracker token="YOUR-TOKEN-HERE" />
  </section>
</template>

<script setup lang="ts">
import CyanStatsTracker from '@/path/to/CyanStatsTracker.vue';

// ... YOUR APP CODE
</script>

<style lang="scss">
#app { ... }
</style>

👆 Passing the token is optional in production, when calling Cyan Stats from the same domain registered to your project. But, it will help you see if it’s working while in development.

Your token can be retrieved in the settings page.

Done! 👏