# Comment intégrer un tableau de bord dans une application ?

# Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement avoir créé un tableau de bord.

Ce chapitre détaille l'intégration du composant dans une application Nuxt en Vue2 et en Vue3.

# Vue2

# Créer une application Nuxt

Dans un premier temps créons un projet Nuxt vierge.

npm -g install nuxi

Initialisons un nouveau projet :

npx nuxi init dashboard-vue2 -t v2
cd dashboard-vue2
npm install

Installons ensuite @nuxtjs/proxy pour accéder à l'API d'AP4 :

npm install @nuxtjs/proxy@2.1.0

Configurons le fichier nuxt.config.js de la manière suivante :

export default {
  ssr: false,
  target: "server",

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/proxy"],

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: ["@nuxtjs/proxy"],

  proxy: {
    "/api/v2/**": {
      target: "http://localhost:8080",
    },
  },
};

# Importer et intégrer le composant

Ajoutons la librairie des composants graphiques du module Dashboard à nos dépendances :

npm install @anakeen/dashboard

Créons maintenant une nouvelle page Dashboard :

touch pages/Dashboard.vue

Et importons le composant DashboardViewer :

<template>
  <div class="dashboard-container">
    <dashboard-viewer dashboard="dashboard_direction" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import DashboardViewer from "@anakeen/dashboard/components/libVue2/DashboardViewer.esm";

export default Vue.extend({
  components: {
    "dashboard-viewer": DashboardViewer,
  },
});
</script>

<style>
.dashboard-container {
  width: 100%;
  height: 100%;
}
</style>

La propriété dashboard doit contenir la référence du tableau de bord que l'on souhaite afficher, ici dashboard_direction.

Démarrons le serveur de développement pour voir le résultat :

npm run dev

Le tableau de bord peut maintenant être visualisé à l'adresse suivante : http://localhost:3000/dashboard.

import type { DashboardViewerType } from "@anakeen/dashboard/components/libVue2/DashboardViewer.esm";

# Vue3

# Créer une application Nuxt

Dans un premier temps créons un projet Nuxt vierge.

npm -g install nuxi

Initialisons un nouveau projet :

npx nuxi init dashboard-vue3 -t v3
cd dashboard-vue3
npm install
mkdir pages

Configurons le fichier nuxt.config.ts de la manière suivante :

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  ssr: false,
  vite: {
    server: {
      proxy: {
        "/api/v2": {
          target: "http://localhost:8080",
          changeOrigin: true,
        },
      },
    },
  },
  components: true,
});

# Importer et intégrer le composant

Modifions app.vue pour avoir le rendu de nos pages :

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Ajoutons la librairie des composants graphiques du module Dashboard à nos dépendances :

npm install @anakeen/dashboard

Créons maintenant une nouvelle page Dashboard :

touch pages/Dashboard.vue

Et importons le composant DashboardViewer :

<template>
  <div class="dashboard-container">
    <dashboard-viewer dashboard="dashboard_direction" />
  </div>
</template>
<script lang="ts">
import DashboardViewer from "@anakeen/dashboard/components/libVue3/DashboardViewer.esm";

export default {
  components: {
    "dashboard-viewer": DashboardViewer,
  },
};
</script>
<style>
.dashboard-container {
  width: 100%;
  height: 100vh;
}
</style>

La propriété dashboard doit contenir la référence du tableau de bord que l'on souhaite afficher, ici dashboard_direction.

Démarrons le serveur de développement pour voir le résultat :

npm run dev

Le tableau de bord peut maintenant être visualisé à l'adresse suivante : http://localhost:3000/dashboard.

import type { DashboardViewerType } from "@anakeen/dashboard/components/libVue3/DashboardViewer.esm";

# Et ensuite ?

Bravo vous avez terminé le How To du module Dashboard ! 🎉