Implementation Engineer
e9da21b57e
- composables/useApi.ts: base API client with runtimeConfig - composables/useEquipment.ts: equipment API wrapper (list, detail, categories) - components/EquipmentCard.vue: card with image/placeholder, badge, name, price, add-to-cart - pages/mietkatalog.vue: SSR list with search, category chips, sort, pagination, skeleton, empty/error states - pages/mietkatalog/[id].vue: SSR detail with specs table, related items, breadcrumb, add-to-cart - nuxt.config.ts: runtimeConfig with apiBase - 101 vitest tests passing (5 files) - Build: 0 errors, 2.09 MB
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import type { $Fetch } from "nitropack";
|
|
|
|
/**
|
|
* Base API client composable.
|
|
* Wraps $fetch with the configured API base URL from runtime config.
|
|
* Provides typed GET, POST, PUT, DELETE helpers.
|
|
*/
|
|
export function useApi() {
|
|
const config = useRuntimeConfig();
|
|
const apiBase = config.public.apiBase;
|
|
|
|
/**
|
|
* Typed $fetch wrapper bound to API base URL.
|
|
*/
|
|
const client: $Fetch = $fetch.create({
|
|
baseURL: apiBase,
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
async function get<T>(url: string, params?: Record<string, string | number | boolean | undefined>): Promise<T> {
|
|
return client<T>(url, {
|
|
method: "GET",
|
|
params: params as Record<string, string> | undefined,
|
|
});
|
|
}
|
|
|
|
async function post<T>(url: string, body?: unknown): Promise<T> {
|
|
return client<T>(url, {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
}
|
|
|
|
async function put<T>(url: string, body?: unknown): Promise<T> {
|
|
return client<T>(url, {
|
|
method: "PUT",
|
|
body,
|
|
});
|
|
}
|
|
|
|
async function del<T>(url: string): Promise<T> {
|
|
return client<T>(url, {
|
|
method: "DELETE",
|
|
});
|
|
}
|
|
|
|
return {
|
|
apiBase,
|
|
client,
|
|
get,
|
|
post,
|
|
put,
|
|
del,
|
|
};
|
|
}
|