Client-Side Configuration (Vue)

• Dec 24, 2019
• 3 minutes 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.

Tip

Get Started: Build Web Dashboard Applications

Example: Dashboard Client-Side Application (Vue)

• Prerequisites
• Create Vue Application
• Install Dashboard Package
• Create Dashboard Component
• Modify App Content
• Add Global Styles
• Run the 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).