`@cubejs-client/vue3`

<template>
  <query-builder :cube-api="cubeApi" :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 cube from "@cubejs-client/core";
  import Multiselect from "vue-multiselect";
  import { QueryBuilder } from "@cubejs-client/vue";
  import ChartRenderer from "./ChartRenderer.vue";

  const API_URL =
    "https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1";
  const CUBE_TOKEN =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1OTQ2NjY4OTR9.0fdi5cuDZ2t3OSrPOMoc3B1_pwhnWj4ZmM3FHEX7Aus";

  const cubeApi = cube(CUBE_TOKEN, { apiUrl: API_URL });

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

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

<template>
  <query-renderer :cube-api="cubeApi" :query="query" v-if="cubeApi">
    <template #default="{ resultSet }"> </template>

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

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

  const cubeApi = cube("YOUR-CUBE-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 {
        cubeApi,
        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>