Quickstart: use the Credicorp public API in Nuxt

2 min read

NuxtIdiomatic integration

cacheCatalogue changes rarely

configBase URL from env

Call the API from Nuxt

// composables/useProducts.js
export const useProducts = () =>
  useAsyncData('products', () =>
    $fetch('https://api.credicorp.co.uk/public/v1/products')
      .then(r => r.data));

Use useAsyncData with Nuxt's $fetch so the call runs on the server and hydrates the client. Cache with Nitro route rules or a server route that proxies and caches.

Sandbox first

Set the base URL to https://sandbox.credicorp.co.uk/public/v1 in development and CI. See choosing a base URL.

Next steps

Add a quote form or an enquiry submission, and send applicants to apply. Handle failures with the shared error envelope.

Frequently asked questions

Should I cache the catalogue in Nuxt?

Yes — it changes infrequently. Cache it for the response's max-age using Nuxt's caching layer, so the API stays off your hot path and under the rate limit.

Where does the base URL belong?

In Nuxt's configuration, read from an environment variable per environment, so the same build runs against sandbox and production by changing one value.