Quickstart: use the Credicorp public API in Vue 3

Call the API from Vue 3

<script setup>
import { ref, onMounted } from 'vue';
const products = ref([]);
onMounted(async () => {
  const res = await fetch(`${import.meta.env.VITE_CREDICORP_BASE}/products`);
  products.value = (await res.json()).data;
});
</script>

<template>
  <ul><li v-for="p in products" :key="p.id">{{ p.name }}</li></ul>
</template>

Fetch in `onMounted` and hold the result in a `ref`. As with any front-end, the base URL is a public env var and no secret ever ships to the browser.

Point at sandbox in development

Set the base URL to https://sandbox.credicorp.co.uk/public/v1 in development and CI, and to https://api.credicorp.co.uk/public/v1 in production — driven by the one environment variable your framework already exposes. See choosing a base URL.

Next steps

From here you can add a quote form, an enquiry submission or an embeddable product picker. Send applicants to apply to start a real journey.