ag-grid: Vue3 Cell Renderer Setup() method not running

You can use the composition api in cell renderers, but it is janky. The only thing I’ve found that works is using getCurrentInstance(). The larger issue though is there is no example / or possible way that I have found to use application components / dependencies(vue router, router-link, vuex, other globally registered component, etc) inside of an ag grid cell renderer component. I.E. I would much prefer to use the router-link component in the example below instead of creating an anchor tag.

<template>
  <a v-if="url" :href="url" class="grid-link">{{linkText}}</a>
  <span v-else>{{linkText}}</span>
</template>

<script lang="ts">
import {
  computed,
  defineComponent, getCurrentInstance
} from 'vue';
// Ag grid cell renderer support for Vue 3 still isn't quite right.
// Globally registered components also do not work
// params is added to the Component instance (getCurrentInstance) data and is where the cell values are stored.
// params.key is where 'cellRendererParams' defined in a column's columnDef reside
// params.data contains the values for all columns/fields on this cell's row.
export default defineComponent({
  name: 'LinkCell',
  setup() {
    const instance = getCurrentInstance();

    function getParts(): Record<'params'|'data', any> {
      const { params } = instance?.data as Record<'params', any>;
      const { data } = params;
      return { params, data };
    }

    return {
      linkText: computed(() => {
        const { params, data } = getParts();
        const prop: string = params.labelProp;
        const failSafe: string = params.linkLabel ? params.linkLabel : 'View';
        return data[prop] || failSafe;
      }),
      url: computed(() => {
        const { params, data } = getParts();
        const prop: string = params.urlProp;
        return data[prop] ? `#/${data[prop]}` : null;
      })
    };
  }
});
</script>

A note for everyone here - there were a few issues around the first version of our vue 3 offering. This issue along with others should be fixed with 26.0.0, currently scheduled for the end of next week

Hmmm, globally registered components still cannot be used in cell renderers v26.0.0. This doesn’t appear to be fixed.

This PR seems like they attempted to resolve the issue: https://github.com/ag-grid/ag-grid/pull/4601

But it was closed.

I should also note that all examples will (alongside JS, react, angular and vue 2) have a vue 3 version. There is also a vue 3 specific getting started guide (again, to be released next week)

It’s a bug and need to be fixed. Change the render component into Vue3 composite style, you will see an error.

Hmmm, globally registered components still cannot be used in cell renderers v26.0.0. This doesn’t appear to be fixed.

This PR seems like they attempted to resolve the issue: #4601

But it was closed.

@seanlandsman: Just to clarify, since this is the main GitHub issue that comes up when searching for the above limitation: this is still the case, right?

That is, currently there is no way to call e.g. Vue’s inject() or vue-i18n’s useI18n() in the setup() function of a custom cell renderer, correct?

The documentation seems to suggest this here.

thanks for helping verify this @hloehrmann - I’ll be issuing a proper patch release either tomorrow or early next week

You can use the composition api in cell renderers, but it is janky. The only thing I’ve found that works is using getCurrentInstance(). The larger issue though is there is no example / or possible way that I have found to use application components / dependencies(vue router, router-link, vuex, other globally registered component, etc) inside of an ag grid cell renderer component. I.E. I would much prefer to use the router-link component in the example below instead of creating an anchor tag.

Note from my side: you need to call getCurrentInstance in the onBeforeMount lifecycle hook, otherwise the params are not available. It also helps to type the params as ICellRendererParams.

setup() {
    const someValue = ref('');

    onBeforeMount(() => {
      const instance = getCurrentInstance()?.data as Record<
        'params',
        ICellRendererParams
      >;

      const params = instance.params;
      someValue.value = params.value;
    });

    return {
      someValue
    };
  },