All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Add a Web Dashboard to a Vue Application

  • 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 6+ and npm 5.2+ 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 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@20.2-next devexpress-dashboard-vue@20.2-next @devexpress/analytics-core@20.2-next devextreme@20.2-next --save devextreme-vue@20.2-next --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 'devextreme/dist/css/dx.common.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: