table pagination in nuxt js

Question

i want to get totalpage dynamically my api returns total page in response header in "x-total-count = 50" but could not really figured it out how to get that variable to my frontend here is my code

const sort = ref({ column: 'licensePlate', direction: 'asc' as const })
const page = ref(1)
const pageCount = ref(10)
const pageTotal = ref(50)   //This value should be dynamic coming from the API 
const pageFrom = computed(() => (page.value - 1) * pageCount.value + 1)
const pageTo = computed(() => Math.min(page.value * pageCount.value, pageTotal.value))

// Data
const { data: cars, status} = await useLazyAsyncData<{
  licensePlate: string
  arrivalDate: string
  charge: number

}[]>('cars', (response) => ($fetch as any)(`http://localhost:3001/deported`, {
  query: {
    q: search.value,
    '_page': page.value,
    '_limit': pageCount.value,
    '_sort': sort.value.column,
    '_order': sort.value.direction
  }
}), {
  default: () => [],
  watch: [page, search, pageCount, sort]
})

couldnt try anything so far

Answer 1

I believe you can use raw fetch and access response headers like this:

const { data } = useAsyncData(async () => {
  const response = await $fetch.raw('http://localhost:3001/deported', {
    query: {
      q: search.value,
      _page: page.value,
      _limit: pageCount.value,
      _sort: sort.value.column,
      _order: sort.value.direction,
    },
  });
  const pages = response.headers.get('x-total-count');
  pageTotal.value = pages ? +pages : 0;
  /** Assuming you are parsing response as json */
  return await response.json();
});

Taken from ofetch docs (fetching library that is used by nuxt)