Nuxt 3 + Airtable example

---

@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.

Hello,

I have some write this you can read this. 

Sure! I can provide you with a simple example of how to retrieve data from Airtable and display it in a Nuxt 3 app using the "composable" approach.

Before you start, make sure you have an Airtable account and you have created a base with some data. Note down your Airtable API key and Base ID, as you'll need them to access your data.

Here are the steps to follow:

Create a Composable: Create a new JavaScript file ) in the directory of your Nuxt 3 app. This file will contain the composable that handles data retrieval from Airtable.

// composables/useAirtable.js
import { ref } from 'vue';
import axios from 'axios';

export function useAirtable() {
const data = ref([]);

async function fetchData() {
const API_KEY = 'YOUR_AIRTABLE_API_KEY';
const BASE_ID = 'YOUR_AIRTABLE_BASE_ID';
const TABLE_NAME = 'YOUR_AIRTABLE_TABLE_NAME';

const response = await axios.get(
`https://api.airtable.com/v0/${BASE_ID}/${TABLE_NAME}`,
{
headers: {
Authorization: `Bearer ${API_KEY}`,
},
}
);

data.value = response.data.records;
}

return { data, fetchData };
}
Thanks for read this my information. i hope my information is good and helpful.