Error in ag-grid-vue Could not find component XXX, did you forget to configure this component?

Question

I'm using ag-grid-vue and i'm trying to create custom tool tip.

This is my code:

CustomToolTipVue.js component:

export default {
  template: `
      <div class="custom-tooltip" v-bind:style="{ backgroundColor: color }">
          <p><span>{{ data.athlete }}</span></p>
          <p><span>Country: </span>{{ data.country }}</p>
          <p><span>Total: </span>{{ data.total }}</p>
      </div>
    `,
  data: function () {
    return {
      color: null,
      athlete: null,
      country: null,
      total: null,
    };
  },
  beforeMount() {
    this.data = this.params.api.getDisplayedRowAtIndex(
      this.params.rowIndex
    ).data;
    this.color = this.params.color || 'white';
  },
};

Grid component - where i'm using it (Attached only the main code):

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-community";
import CustomToolTipVue from './CustomToolTipVue.js'

export default {
  name: "Grid",
  data: () => ({
    gridOptions: null,
    gridApi: null,
    gridColumnApi: null,
    selectedRows: [],
    noRowsTemplate: "",
    loadingTemplate: "",
    rowClassRules:null
  }),
  components: {
    AgGridVue,
    CustomToolTipVue
  },
  created() {
    this.gridOptions = {};
    this.gridOptions.columnDefs = this.columnDefs;
    this.gridOptions.components = {
    };
  },
  computed: {
    defaultColDef() {
      return {
        resizable: true,
        menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"],
        sortable: true,
        filter: true,
        tooltipComponentParams: { color: '#ececec' },
        tooltipComponent: "CustomToolTipVue",
      };
    },
  },

And i keep getting this error:

"Could not find component CustomToolTipVue, did you forget to configure this component?"

Any idea why?

Answer 1

Managed to solve it by upgrde ag-grid to latest version - 27.0.0