Dashboard Component for Vue

DevExpress Dashboard v20.2 allows you to integrate our Web Dashboard control into Angular and React applications with ease. The new components that make this possible are wrappers atop our JavaScript DashboardControl. These wrappers support standard platform syntax (event handling, option binding, and so much more) and allow you to use the DashboardControl API directly.

Angular and React Dashboard components were first introduced in v20.2.3.

Vue Dashboard

Thanks to great feedback, we’re happy to announce that DevExpress Dashboard is now available for those targeting the Vue framework. Vue support is available in v20.2.5.

If you’re using Vue and are ready to add our Dashboard component to a Vue application, follow the simple steps listed below:

Install the packages

Install the devexpress-dashboard package with required peer dependencies and the devexpress-dashboard-vue package (contains the DxDashboardControl component):

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 

Import Global Styles

Add the global styles in 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') 

Add the DevExpress 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> 

This Web Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

That’s it. Three simple steps to integrate our Web Dashboard into your Vue application.

Documentation and Examples

To learn more about DevExpress Dashboard for Vue, please refer to the following examples:

• Dashboard Component for Vue - Get Started
• Dashboard Component for Vue - Configuration

Help topics related to DevExpress Dashboard for Vue:

• Create a Vue Dashboard Application
• Dashboard Component for Vue

As always, we welcome your feedback. Should you have any questions about DevExpress Dashboard for Vue, please post a comment below. We’ll be happy to follow-up.

Free DevExpress Products – Get Your Copy Today