Fetching Data

One of the most common tasks when building a web application is fetching data from a remote server. To make this task easier, Safḥa provides a custom composables that you can use to fetch data from a remote server.

Updating nuxt.config.js

To use the composables, you need to update the nuxt.config.js file to include the base URL of the API server. Here is an example of how to update the nuxt.config.js file:

export default defineNuxtConfig({
	runtimeConfig: {
		public: {
			apiBaseUrl: 'URL_TO_API_SERVER',
		},
	},
});

Using the Composables

Nuxt provides a number of function that you can use to fetch data from a remote server. Safḥa wraps two of these functions so they can be used with base URL defined in the nuxt.config.js file.

To fetch data from a remote server, you can use the useCustomFetch composable. Here is an example of how to use the useFetch composable:

<template>
	<div>
		<div v-if="pending">
			Loading...
		</div>

		<div v-else>
			<div v-for="item in data" :key="item.id">
				{{ item.title }}
			</div>
		</div>
	</div>

</template>

<script setup lang="ts">
const { data, pending } = useCustomFetch('/api/items');
</script>

The useCustomFetch composable returns the same object as the useFetch composable provided by Nuxt. The only difference is that the useCustomFetch composable uses the base URL defined in the nuxt.config.js file.

You can also use useCustomDollarFetch function to fetch data from a remote server. It works the same as $fetch provided by Nuxt, but uses the base URL defined in the nuxt.config.js file. Here is an example of how to use the useCustomDollarFetch function:

<template>
	<ButtonA @click="onButtonClick">
		Fetch Data
	</ButtonA>

	<div>
		<div v-for="item in items" :key="item.id">
			{{ item.title }}
		</div>
	</div>
</template>

<script setup lang="ts">
import { useCustomDollarFetch } from 'safha';
const items = ref([]);
const onButtonClick = async () => {
	items.value = await useCustomDollarFetch('/api/items');
};
</script>