Client-Side Configuration (Vue)

• Aug 05, 2019
• 4 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

• 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, DashboardPanelExtension } from 'devexpress-dashboard';
import Globalize from 'globalize';

import cldrdata from "devextreme-cldr-data/en.json";
import supplemental from "devextreme-cldr-data/supplemental.json";

export default {
  name: 'DashboardComponent',
    props: {
        componentId: String
    },
  mounted () {
    Globalize.load(
      cldrdata, supplemental
    );
    Globalize.locale('en');

    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.registerExtension(new DashboardPanelExtension(this.dashboardControl));
    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');

Customize Webpack

Create a vue.config.js file at the root of your application and add the following content:

var path = require('path');

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
        .set('globalize$', path.resolve(__dirname, 'node_modules/globalize/dist/globalize.js'))
        .set('globalize', path.resolve(__dirname, 'node_modules/globalize/dist/globalize'))
        .set('cldr$', path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr.js'))
        .set('cldr', path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr'))
    }
}

Support Culture-Specific Data

Web Dashboard uses the globalize library to display culture-specific data.

Add the required cultures and specify one of the added locales in the Globalize.locale method to change the culture:

import cldrdata from "devextreme-cldr-data/de.json";
import supplemental from "devextreme-cldr-data/supplemental.json";

export default {
  name: 'DashboardComponent',
    props: {
        componentId: String
    },
  mounted () {
    Globalize.load(
      cldrdata, supplemental
    );
    Globalize.locale('de');
    // ...   
  }
}

Tip

See Localize Web Dashboard Control for information about UI localization.

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).