Viewer Component - Toolbar Customization

<template>
  <div>
    <div id="viewer-host">
      <JSViewer
      theme="ActiveReports"
        :report="{
          Uri: '/activereportsjs/demos/resource/reports/Frontstore.rdlx-json',
        }"
        ref="reportViewer"
      ></JSViewer>
    </div>
    <div class="modal fade" id="dlgAbout" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
              ActiveReportsJS Sample
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            This sample shows how to customize the ActiveReportsJS Viewer
            component's toolbar.
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-outline-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { Viewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/tabulardataexport";
import Core from "@mescius/activereportsjs/core";

Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");

export default {
  components: {
    JSViewer: Viewer,
  },
  setup() {
    const reportViewer = ref(null);

    onMounted(() => {
      const aboutButton = {
        key: "$about",
        iconCssClass: "mdi mdi-help-circle",
        text: "About",
        enabled: true,
        action: function (item) {
          $("#dlgAbout").modal("show");
        },
      };
      reportViewer.value.Viewer().toolbar.addItem(aboutButton);
      reportViewer.value.Viewer().toolbar.updateLayout({
        default: [
          "$zoom",
          "$split",
          "$fullscreen",
          "$split",
          "$print",
          "$split",
          "$about",
        ],
        fullscreen: ["$fullscreen", "$split", "$print", "$split", "$about"],
        mobile: ["$navigation", "$split", "$about"],
      });
    });

    return {
      reportViewer,
    };
  },
};
</script>

<style>
#viewer-host {
  width: 100%;
  height: 600px;
}
</style>