Add a Web Dashboard to a Vue Application

• Jun 14, 2024
• 3 minutes to read

This article assumes that you implement a client-server architecture. An ASP.NET Core or an ASP.NET MVC application serves as the backend (server side). The client (frontend) application includes all the necessary styles, scripts and HTML-templates. Note that client scripts, libraries on the server side, and devexpress npm packages should have matching version numbers.

This topic describes how to import the DxDashboardControl component into a Vue application and display Web Dashboard.

View Example

Prerequisites

• Make sure you have Node.js and npm installed on your machine.

• In the command prompt, install the Vue CLI (command line interface tool) globally:

  npm install -g @vue/cli
  

  If you are not familiar with the basic concepts and patterns of Vue, please review the fundamentals before you continue: vuejs.org

Create a Vue Application

In the command prompt, create a Vue application with a default preset:

vue create dashboard-vue-app

Navigate to the created folder after the project is created:

cd dashboard-vue-app

Install the Dashboard Package

Install the following npm packages:

npm install devexpress-dashboard@24.2.3 devexpress-dashboard-vue@24.2.3 @devexpress/analytics-core@24.2.3 devextreme@24.2.3 --save devextreme-vue@24.2.3 --save

The devexpress-dashboard npm package references devextreme and @devexpress/analytics-core as peer dependencies. The peer dependencies packages should be installed manually. This allows you to control a version of the peer dependencies packages and guarantees that the package is installed once.

You can find all the libraries in the node_modules folder after installation is completed.

Add a Dashboard Component

Open the App.vue file and add the <DxDashboardControl> template to render the dashboard component:

<template>
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; ">
        <DxDashboardControl 
            style="height:100%"
            endpoint="https://demos.devexpress.com/services/dashboard/api"

        />
    </div>
</template>

<script>
import { DxDashboardControl } from 'devexpress-dashboard-vue';

export default {
    components: {
        DxDashboardControl,
    }
}
</script>

The DashboardControlOptions.endpoint property specifies the URL used to send data requests to a server. The value should consist of a base URL where the Web Dashboard’s server side is hosted and a route prefix - a value that is set in the MVC / .NET Core MapDashboardRoute properties.

Import Global Styles

Add the following global styles to the main.js file:

import Vue from 'vue'
import App from './App.vue'
import "ace-builds/css/ace.css";
import "ace-builds/css/theme/dreamweaver.css";
import "ace-builds/css/theme/ambiance.css"; 
import "devextreme/dist/css/dx.light.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
import "devexpress-dashboard/dist/css/dx-dashboard.light.css";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Run the Application

Run the application.

npm run serve

Open http://localhost:8080/ in your browser to see the result. The Web Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api). To configure your own server, follow the instructions below:

• Server-Side Configuration (ASP.NET Core)
• Server-Side Configuration (ASP.NET MVC)