Having a nuxt link column in AG Grid

I have the page below, and I am trying to implement a column in the AG grid that navigates to another details page. However the link is not clickable. I can see following are rendered in the browser:

Any suggestion how to do this?

<template>
  <div class="px-12 py-16 space-y-8 flex flex-col h-full">

    <section class="bg-white rounded-xl shadow-sm border border-gray-100 flex-1 flex flex-col min-h-0">

      <div class="p-6 flex-1 overflow-auto">
        <h3 class="text-lg font-medium mb-4">Leads</h3>
        <div class="mb-2 text-xs text-gray-500">
          <nuxt-link to="/commercial/leads/details/1">User</nuxt-link>
        </div>

        <div class="ag-theme-alpine" style="width: 100%; height: 100%;">
  <ag-grid-vue 
    :rowData="rowData" 
    :columnDefs="columnDefs" 
    :defaultColDef="defaultColDef"
    :gridOptions="{ domLayout: 'autoHeight' }">
  </ag-grid-vue>
</div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { AllEnterpriseModule, LicenseManager, ModuleRegistry } from "ag-grid-enterprise";
import { AgGridVue } from "ag-grid-vue3";

usePageTitle()

definePageMeta({
  layout: 'commercial',
})

const config = useRuntimeConfig();
const gridLicense = config.public.agGridLicense;

if (gridLicense && gridLicense.length > 0) {
  ModuleRegistry.registerModules([AllEnterpriseModule]);
  LicenseManager.setLicenseKey(gridLicense);
}

const columnDefs = [
  { field: "title" },
  { field: "status" },
  { field: "action" },
  { 
    headerName: "Details",
    field: "link",
    cellRenderer: (params) => {
      return `<nuxt-link to='/commercial/leads/details/1' class='text-blue-500 underline'>View Details</nuxt-link>`;
    }
  }
];

const rowData = ref<any[]>([]);

const defaultColDef = {
  flex: 1,
};

interface Lead {
  lead_uuid: string
  company_uuid: string
  title: string
  status: string
  action: string
}

const loading = ref(true)

onMounted(async () => {
  loading.value = true
  try {
    const response = await $fetch('/api/leads/lead')

    rowData.value = response
    console.log('API Response:', response)
    // Log the structure of the response to help debug
   
  } catch (error) {
    console.error('Error fetching leads:', error)
  } finally {
    loading.value = false
  }
})

async function onAddLead() {
  alert('Add lead clicked')
  // TODO: Open add lead modal or navigate to add page
}

</script>

<style>
@import "ag-grid-community/styles/ag-grid.css";
@import "ag-grid-community/styles/ag-theme-alpine.css";
</style>

The problem is AG Grid doesn't recognize <nuxt-link> when you return it as a string. You need to create a clickable element with proper navigation.

Try this fix:

javascript

{ 
  headerName: "Details",
  field: "link",
  cellRenderer: (params) => {
    const link = document.createElement('a');
    link.href = `/commercial/leads/details/${params.data.lead_uuid || '1'}`;
    link.textContent = 'View Details';
    link.className = 'text-blue-500 underline cursor-pointer';
    
    link.onclick = (e) => {
      e.preventDefault();
      navigateTo(`/commercial/leads/details/${params.data.lead_uuid || '1'}`);
    };
    
    return link;
  }
}

This creates an actual clickable link that uses Nuxt's router instead of just returning HTML as text.