@cubejs-client/vue

@cubejs-client/vue provides Vue Components to easily integrate Cube.js within a Vue.js app.

<QueryBuilder /> is used to build interactive analytics query builders. It abstracts state management and API calls to Cube.js Backend. It uses scoped slot props technique.

NameTypeDescription
cubejsApiCubejsApiCubejsApi instance to use
initialChartType?ChartTypeThe type of chart to display initially. Default is line.
disableHeuristics?booleanDefaults to false. This means that the default heuristics will be applied. For example: when the query is empty and you select a measure that has a default time dimension it will be pushed to the query.
query?QueryQuery parameters (learn more about the format). This property is reactive - if you change the object here, the internal query values will be overwritten. This is not two-way.
stateChangeHeuristics?(state: QueryBuilderState) => QueryBuilderStateA function that accepts the newState just before it's applied. You can use it to override the defaultHeuristics or to tweak the query or the vizState in any way.
initialVizState?VizState-

Default Slot

Slot Props
  • resultSet: A resultSet is an object containing data obtained from the query. ResultSet object provides a convenient interface for data manipulation.

Empty Slot

This slot functions as an empty/loading state; when the query is loading or empty, you can show something in the meantime.

Error Slot

This slot will be rendered if any error happens while the query is loading or rendering.

Slot Props
  • error: the error.
  • sqlQuery: the attempted query.

Builder Slot

  • measures, dimensions, segments, timeDimensions, filters - arrays containing the selected query builder members.
  • availableMeasures, availableDimensions, availableTimeDimensions, availableSegments - arrays containing available members to select. They are loaded via API from Cube.js Backend.
  • addMeasures, addDimensions, addSegments, addTimeDimensions - functions to control the adding of new members to query builder.
  • removeMeasures, removeDimensions, removeSegments, removeTimeDimensions - functions to control the removing of members to query builder.
  • setMeasures, setDimensions, setSegments, setTimeDimensions - functions to control the setting of members to query builder.
  • updateMeasures, updateDimensions, updateSegments, updateTimeDimensions - functions to control the updating of members to query builder.
  • chartType - string containing currently selected chart type.
  • updateChartType - function-setter for chart type.
  • isQueryPresent - bool indicating whether is query ready to be displayed or not.
  • query - current query, based on selected members.
  • setLimit, removeLimit - functions to control the number of results returned.
  • setOffset, removeOffset - functions to control the number of rows skipped before results returned. Use with limit to control pagination.

<template>
  <query-builder :cubejs-api="cubejsApi" :query="query">
    <template #builder="{ measures, setMeasures, availableMeasures }">
      <multiselect
        placeholder="Please Select"
        label="Title"
        track-by="name"
        multiple
        :customLabel="customLabel"
        :value="measures"
        :options="availableMeasures"
        @input="(...args) => set(setMeasures, ...args)"
      />
    </template>

    <template #default="{ resultSet }">
      <chart-renderer v-if="resultSet" :result-set="resultSet" />
    </template>

    <template #empty>Loading...</template>
  </query-builder>
</template>

<script>
import cubejs from '@cubejs-client/core';
import Multiselect from 'vue-multiselect';
import { QueryBuilder } from '@cubejs-client/vue';
import ChartRenderer from './ChartRenderer.vue';

const API_URL = 'https://ecom.cubecloudapp.dev/cubejs-api/v1';
const CUBEJS_TOKEN =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1OTQ2NjY4OTR9.0fdi5cuDZ2t3OSrPOMoc3B1_pwhnWj4ZmM3FHEX7Aus';

const cubejsApi = cubejs(CUBEJS_TOKEN, { apiUrl: API_URL });

export default {
  name: 'QueryBuilderExample',
  components: {
    Multiselect,
    QueryBuilder,
    ChartRenderer,
  },
  data() {
    const query = {
      measures: [],
      timeDimensions: [
        {
          dimension: 'LineItems.createdAt',
          granularity: 'month',
        },
      ],
    };

    return {
      cubejsApi,
      selected: undefined,
      query,
    };
  },
  methods: {
    customLabel(a) {
      return a.title;
    },
    set(setMeasures, value) {
      setMeasures(value.map((e) => e.name));
    },
  },
};
</script>

<QueryRenderer /> Vue component takes a query, fetches the given query, and uses the slot scoped props to render the resulting data.

NameTypeDescription
cubejsApiCubejsApiCubejsApi instance to use
loadSql?"only" | booleanIndicates whether the generated by Cube.js SQL Code should be requested. See rest-api#sql. When set to only then only the request to /v1/sql will be performed. When set to true the sql request will be performed along with the query request. Will not be performed if set to false
queries?object-
queryQueryAnalytic query. Learn more about it's format

Default Slot

Slot Props
  • resultSet: A resultSet is an object containing data obtained from the query. ResultSet object provides a convenient interface for data manipulation.

Empty Slot

This slot functions as an empty/loading state; when the query is loading or empty, you can show something in the meantime.

Error Slot

This slot will be rendered if any error happens while the query is loading or rendering.

Slot Props
  • error: the error.
  • sqlQuery: the attempted query.

<template>
  <query-renderer :cubejs-api="cubejsApi" :query="query" v-if="cubejsApi">
    <template #default="{ resultSet }">
      <!--      render a chart here using the `resultSet`-->
    </template>

    <template #empty> Loading... </template>
  </query-renderer>
</template>

<script>
import cubejs from '@cubejs-client/core';
import { QueryRenderer } from '@cubejs-client/vue';

const cubejsApi = cubejs('YOUR-CUBEJS-API-TOKEN', {
  apiUrl: 'http://localhost:4000/cubejs-api/v1',
});

export default {
  name: 'QueryRendererExample',
  components: {
    QueryRenderer,
  },
  data() {
    const query = {
      measures: ['LineItems.count', 'LineItems.quantity', 'Orders.count'],
      timeDimensions: [
        {
          dimension: 'LineItems.createdAt',
          granularity: 'month',
        },
      ],
    };

    return {
      cubejsApi,
      query,
    };
  },
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

ChartType: "line" | "bar" | "table" | "area" | "number" | "pie"

NameType
queryQuery
chartType?ChartType

NameType
chartType?ChartType
pivotConfig?PivotConfig
shouldApplyHeuristicOrder?boolean