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

To generate a dashboard:
<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:

Help topics related to DevExpress Dashboard 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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
Marco Mezzena
Marco Mezzena
Nice. Good to see you are supporting Vue.
27 January 2021
Gabriel
Gabriel
finally
27 January 2021

Please login or register to post comments.