Vue Component

This section outlines the process to render the Semaphor dashboard into your Vue app. We assume that you already have an existing Vue app set up, or you can follow the instructions here (opens in a new tab) to bootstrap one quickly.

1) Install Semaphor Package

Add Sempahor to your project with the following command. Make sure to use the right package depending on the Vue version listed in your package.json

2) Get Auth Token

Make a simple fetch call to acquire the token by passing your dashboard id and secret. In production, you will need to obtain the token from the server side.

async function fetchToken() {
  try {
    const response = await fetch(TOKEN_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dashboardId: DASHBOARD_ID,
        dashboardSecret: DASHBOARD_SECRET,
      }),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
 
    const tk = await response.json();
    if (tk?.accessToken) {
      token.value = tk;
      //console.log('token', token.value);
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
}

3) Initialize Dashboard

Make sure to import vue-semaphor/dist/style.css either at the beginning of your component or in your global CSS file. Your dashboard will not render as expected without base styles. Refer to the full code section.

<template>
  <div>
    <Dashboard
      v-if="token"
      :token="token"
      :id="DASHBOARD_ID"
      currentTheme="system"
    />
  </div>
</template>

Full Code

Here is the complete example that you can copy and paste into your own application.

App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { Dashboard, AuthToken, TStyle } from 'vue-semaphor';
import 'vue-semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.
 
const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86';
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635';
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';
 
const token = ref<AuthToken | null>(null);
 
// Define your custom styles here. Refer to the themes and styles section of the doc.
const customStyle: TStyle = {
  default: {
    chart: {
      dataset: {
        backgroundColor: ['red', 'blue', 'green', 'purple'],
        borderColor: ['red', 'blue', 'green', 'purple'],
      },
    },
  },
};
 
function handleSemaphorEvent(event: unknown) {
  console.log('Event:', event);
}
 
async function fetchToken() {
  try {
    const response = await fetch(TOKEN_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dashboardId: DASHBOARD_ID,
        dashboardSecret: DASHBOARD_SECRET,
      }),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
 
    const tkn = await response.json();
    if (tkn?.accessToken) {
      token.value = tkn;
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
}
fetchToken();
</script>
 
<template>
  <div></div>
  <div v-if="!token">Loading...</div>
  <Dashboard
    v-if="token"
    :token="token"
    :id="DASHBOARD_ID"
    :customStyle="customStyle"
    :currentTheme="'system'"
    :onEvent="handleSemaphorEvent"
  />
</template>

Full Code (Nuxt)

If you are using Nextjs, make sure to import the component dynamically as shown below.

App.vue

<template>
  <div v-if="!token">Loading...</div>
  <Dashboard v-if="token" :token="token" :id="DASHBOARD_ID" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
// Dynamically import components
let Dashboard;
let AuthToken;
import('vue-semaphor').then((module) => {
  Dashboard = module.Dashboard;
  AuthToken = module.AuthToken;
});
 
// Constants
const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86';
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635';
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';
import 'vue-semaphor/dist/style.css';
 
// Reactive state
const token = ref(null);
 
// Fetch token
async function fetchToken() {
  try {
    const response = await fetch(TOKEN_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dashboardId: DASHBOARD_ID,
        dashboardSecret: DASHBOARD_SECRET,
      }),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
 
    const tk = await response.json();
    if (tk?.accessToken) {
      token.value = tk;
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
}
 
// Lifecycle hook to fetch token on mount
onMounted(() => {
  fetchToken();
});
</script>

Key Considerations

Security Note: Keep the DASHBOARD_SECRET secure and do not expose it in client-side code in production. The examples above are for demonstration purposes. When deploying in production, obtain the authentication token from a secure, server-side environment.

React Component Web Component