Vue-ag-grid custom column filter with Composition API SFC

Vuejs has Composition API SFC for a long time, this is the new default API for vuejs. But ag-grid vuejs documentation contains only old Options API / Composition API without SFC examples.

Please somebody help me to create and use a custom column filter with vuejs Options API.

I have the year filter from official ag-grid vue documentation:

  template: `
        <div class="year-filter">
            <div>Select Year Range</div>
            <label>
                <input type="radio" name="year" v-model="year" v-on:change="updateFilter()" value="All"/> All
            </label>
            <label>
                <input type="radio" name="year" v-model="year" v-on:change="updateFilter()" value="2010"/> Since 2010
            </label>
        </div>
    `,
  data: function () {
    return {
      year: 'All',
    };
  },
  methods: {
    updateFilter() {
      this.params.filterChangedCallback();
    },

    doesFilterPass(params) {
      return params.data.year >= 2010;
    },

    isFilterActive() {
      return this.year === '2010';
    },

    // this example isn't using getModel() and setModel(),
    // so safe to just leave these empty. don't do this in your code!!!
    getModel() {},

    setModel() {},
  },
};

And I have a page contains ag-grid-vue list.vue file:

<template>
  <ag-grid-vue ref="agGrid" style="width: 100%; height: 80%;" class="ag-theme-alpine" rowModelType="infinite"
    rowSelection="multiple" animateRows="true" :columnDefs="columnDefs" :defaultColDef="defaultColDef"
     @grid-ready="onGridReady"></ag-grid-vue>
</template>

<script setup>
import { AgGridVue } from 'ag-grid-vue3';
import YearFilter from '../shared/YearFilter';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const columnDefs = [
  { headerName: 'Id', field: 'id', width: 70, filter: 'YearFilter' },
];

const defaultColDef = {
  filter: true,
};
</script>

My issue, is filter remains the same TextFilter, not the custom YearFilter. Please help me, what should do with vuejs 3.4 and Options API to use a custom column filter?

I'm getting these warnings: main.esm.mjs:17925 AG Grid: Could not find 'YearFilter' component. It was configured as "filter: 'YearFilter'" but it wasn't found in the list of registered components.

Did you mean: [agGroupCellRenderer,agCheckboxCellRenderer,agLoadingCellRenderer]?

If using a custom component check it has been registered as described in: https://www.ag-grid.com/vue-data-grid/components/

But on this link, there are only Options API docs, nothing for Composition API SFC (script setup). How can we register a filter component for ag-grid-vue using Composition API?

had the same problem trying to use SFC Components as Cell Component and spend a while looking for a solution. The answer is here: https://www.ag-grid.com/vue-data-grid/vue3-script-setup/

When using a Custom Component in AG Grid with script/setup you need to expose the custom components with defineExpose

Therefore, you'll have to expose YearFilter after importing it as SFC:

defineExpose({YearFilter})