TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    Vue.js Cumul.io Dashboards

    This is a Vue.js library for embedding Cumul.io dashboards in your Vue 2 or Vue 3 application.


    npm i @cumul.io/vue-cumulio-dashboard


    Vue 3

    import { createApp } from 'vue'
    import App from './App.vue'
    import VueCumulio from '@cumul.io/vue-cumulio-dashboard';
    const app = createApp(App);
    // Defines the component at app level

    Vue 2

    import Vue from 'vue'
    import App from './App.vue'
    import VueCumulio from '@cumul.io/vue-cumulio-dashboard/dist/vue2-cumulio.esm'
    new Vue({
      render: h => h(App),

    In your HTML template.

    <!-- Embed a chart by passing the chart id as well -->

    Available props
    Below a list of available props you can add to your cumulio-dashboard

    dashboardId: string;                // The id of the Cumul.io dashboard you wish to embed.
    dashboardSlug: string;              // The slug of the Cumul.io dashboard you wish to embed.
    chartId: string;                    // The id of the Cumul.io chart you wish to embed (Default: null)
    authKey: string;                    // Authorization key generated via Cumul.io API (Default: null)
    authToken: string;                  // Authorization token generated via Cumul.io API (Default: null)
    language: string;                   // Sets the language of errors and loader, eg. 'en' (Default: 'auto')
    screenmode: string;                 // Sets the screenmode of your dashboard: 'mobile', 'tablet', 'desktop', 'largeScreen', 'fixed' (Default: 'auto')
    switchScreenmodeOnResize: boolean;  // true: the embedded dashboard can switch screenmodes on resize of the container , false: Dashboard will keep the same screenmode (Default: true)
    loaderBackground: string;           // Background color of the loader element (Default: '#f9f9f9')
    loaderFontColor: string;            // Font color of the text of the loaders (Default: '#5a5a5a')
    loaderSpinnerColor: string;         // Spinner color of the loader (Default: 'rgba(255, 165, 0, 0.7)')
    loaderSpinnerBackground: string;    // Background color of the spinner (Default: 'rgba(169, 169, 169, 0.14)')


    @custom-event: Object;                // Custom event triggered in the dashboard. Returns custom event information.
    @charts-rendered: Object;             // Charts have been rendered. Returns event information containing dashboard id and frame.
    @load: Object;                       // Dashboard has been loaded. Returns load event information containing dashboard id, frame and the dashboard dimensions.
    @exported: Object;                   // Export of a dashboard was succesful. Returns event information.
    @changed-filters: [];                 // Filters were changed. Returns a list of dashboards with their active filters.


    A dashboard with a gray loader background


    A dashboard with a purple loader spinner color, screenmode mobile and switchScreenmodeOnResize on false, so that the dashboard will stay in mobile mode


    Public methods from CumulioService

    In Component, service can also be used to facilitate different functionality

    import { CumulioService } from '@cumul.io/vue-cumulio-dashboard';
    export default {
      name: 'Example',
      methods: {
        // To refresh data from chart / dashboard
        // Get data from a chart
        async getData(){
          const result = await CumulioService.getData('6759f444-32b8-42d8-8786-eb88fc2a194');
    getDashboards(): Promise<any[]>
    // Returns an instantly resolved promise with an array of all the visible dashboards on a page with their information.
    getFilters(): Promise<any[]>
    // Returns an instantly resolved promise with an array of all visible dashboards with their active filters.
    getData(itemId: string, dashboard?: {dashboardId?: string, container?: string}): Promise<any[]>
    // Returns a promise with the data of a chart.
    setAuthorization(key: string, token: string, dashboard?: {dashboardId?: string, container?: string, dashboardSlug?: string}): Promise<>
    // Changes the authorization of all or one dashboard. Returns an empty promise.
    refreshData(id?: string): Promise<>
    // Refreshes the data of a specific chart when the id of that chart is supplied. Without a itemId this refreshes the data in all charts. Returns an empty promise.
    reloadDashboard(): Promise<>
    // Reload the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded without reloading the iFrame). Returns an empty promise.
    exportDashboard({ container: string }, type?: string): Promise<Object>
    // Exports the current dashboard as either pdf or png. a container class needs to be passed as an argument and an optional type parameter. Returns a promise with information on the export.
    getAccessibleDashboards({ dashboardId?: string, dashboardSlug?: string, apiHost?: string, authKey?: string, authToken?: string, container?: string }): Promise<Array>
    // Get accessible dashboards in a integration, provide either dashboardId, dashboardSlug, container if a dashboard is already loaded.
    // Or provide authKey, apiHost and authToken

    Quick links

    Cumul.io | Vue2 CodeSandbox Example | Vue3 CodeSandbox Example


    npm i @cumul.io/vue-cumulio-dashboard



    DownloadsWeekly Downloads






    Unpacked Size

    96.4 kB

    Total Files


    Last publish


    • avatar