@KWOKAH wrote:
Is there someone who can share an easy to follow example on how to retrieve data from Airtable and show them in a Nuxt 3 app? I managed to call the data but struggle to return the data to the vue page where I want to display it. I realise that this is not really a problem with Airtable, I would just want an example I can follow. There seem to be many different approaches, via a Netlify function (not my preferred option), using the Airtable.js library, using a "composable" ...
Hello,
Certainly! To retrieve data from Airtable and display it in a Nuxt 3 app, you can use the "axios" library to fetch the data from Airtable API in a Nuxt "composable" and then use it in your Vue page.
Install axios: npm install axios
Create a "composable" (e.g., useAirtable.js) with the axios logic to fetch data from Airtable.
Use the "composable" in your Vue page to get the data and display it.
Example "useAirtable.js" composable:
import axios from 'axios';
export default function useAirtable() {
const apiKey = 'YOUR_AIRTABLE_API_KEY';
const baseId = 'YOUR_AIRTABLE_BASE_ID';
const tableName = 'YOUR_AIRTABLE_TABLE_NAME';
async function fetchData() {
const apiUrl = `https://api.airtable.com/v0/${baseId}/${tableName}`;
const headers = {
Authorization: `Bearer ${apiKey}`,
};
try {
const response = await axios.get(apiUrl, { headers });
return response.data.records;
} catch (error) {
console.error('Error fetching data from Airtable:', error);
return [];
}
}
return { fetchData };
}
Example Vue page using the composable:
<template>
<div>
<h1>Data from Airtable:</h1>
<ul>
<li v-for="item in data" :key="item.id">{{ item.fields.name }}</li>
</ul>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import useAirtable from '~/composables/useAirtable';
export default defineComponent({
async asyncData() {
const { fetchData } = useAirtable();
const data = await fetchData();
return { data };
},
});
</script>
Make sure to replace 'YOUR_AIRTABLE_API_KEY', 'YOUR_AIRTABLE_BASE_ID', and 'YOUR_AIRTABLE_TABLE_NAME' with your actual Airtable API key, base ID, and table name.
This example fetches data during server-side rendering (asyncData) for initial page load. If you need to fetch data on the client-side (after the page has loaded), you can use fetchData method in a lifecycle hook like mounted instead of asyncData.
