Save the date! Join us on October 16 for our Product Ops launch event. Register here.
Jul 23, 2023 02:09 AM
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" ...
Jul 24, 2023 10:35 PM
@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.
Aug 02, 2023 05:27 AM
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.