The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.2
19.2
19.1
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.

Client-Side Configuration (Vue)

  • 3 min to read

This approach is based on the client-server model. You need a server (backend) project and a client (frontend) application that includes all the necessary styles, scripts and HTML-templates. Note that the script version on the client should match with libraries version on the server up to a minor version.

The modular approach allows you to integrate the HTML JavaScript Dashboard control into web applications. This topic describes how to add the HTML JavaScript Dashboard control to a Vue application.

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
    

    Refer to the Vue CLI documentation for information on the application's structure and the created files' purposes.

Create Vue Application

In the command prompt, create a Vue application with a default preset and navigate to the created folder:

vue create dashboard-vue-app
cd dashboard-vue-app

Install Dashboard Package

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

Install a dashboard package with required peerDependencies:

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

Create Dashboard Component

In the src | components folder, create a DashboardComponent.vue file and add the content below:

<template>
  <div v-bind:id="componentId" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0">
  </div>
</template>

<script>
import { DashboardControl, ResourceManager } from 'devexpress-dashboard';

export default {
  name: 'DashboardComponent',
    props: {
        componentId: String
    },
  mounted () {
    ResourceManager.embedBundledResources();

    this.dashboardControl = new DashboardControl(document.getElementById(this.componentId),  {          
        // Specifies the URL where the Web Dashboard's server side is hosted.
        endpoint: "https://demos.devexpress.com/services/dashboard/api",
        workingMode: "Designer",
    });
    this.dashboardControl.render();
  },
  beforeDestroy() {
    this.dashboardControl.dispose();
  },
}
</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.

Modify App Content

Open the src | App.vue file and modify its content to display a dashboard component on the page:

<template>
  <div>
    <DashboardComponent componentId="dashboardControl1"/>
  </div>
</template>

<script>
import DashboardComponent from './components/DashboardComponent';

export default {
  name: 'app',
  components: {
    DashboardComponent
  }
}
</script>

Add Global Styles

Open the src | main.js file and the following global styles:

import "jquery-ui/themes/base/all.css";
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";

import Vue from 'vue'
import App from './App.vue'

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 HTML JavaScript Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).