Skip to main content
All docs
V24.2

Add a Web Dashboard to a Vue Application

  • 2 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.

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

#Create a Vue Application

  1. Create a Vue application with a default preset:
cmd
npm create vue@latest dashboard-vue-app
  1. Navigate to the created project folder:
cmd
cd dashboard-vue-app

#Install the Dashboard Package

Install the following DevExpress npm packages:

cmd
npm install devexpress-dashboard@24.2-stable devexpress-dashboard-vue@24.2-stable @devexpress/analytics-core@24.2-stable devextreme@24.2-stable devextreme-vue@24.2-stable 

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

#Add a Dashboard Component

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

typescript
<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:

js
import { createApp } 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";

createApp(App).mount('#app')

Remove default project styles to avoid conflicts. To do this, remove the ./assets/main.css import in the main.js file.

#Run the Application

Run the application.

cmd
npm run dev

Open your browser and navigate to the URL specified in the command output 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: