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