Nuxt

# .env
SKAYLE_API_BASE_URL=https://api.skayle.ai
SKAYLE_ORG_ID=your_organization_id

export default defineNuxtConfig({
	runtimeConfig: {
		skayleApiBaseUrl: process.env.SKAYLE_API_BASE_URL || "https://api.skayle.ai",
		skayleOrgId: process.env.SKAYLE_ORG_ID,
	},
	routeRules: {
		"/blog": { swr: 300 },
		"/blog/**": { swr: 300 },
	},
});

export type JsonApiResource<T = Record<string, unknown>> = {
	id: string;
	type: string;
	attributes: T;
};

export async function fetchSkayle<T>(path: string) {
	const config = useRuntimeConfig();
	const orgId = config.skayleOrgId;
	if (!orgId) throw new Error("Missing SKAYLE_ORG_ID");

	return $fetch<T>(`${config.skayleApiBaseUrl}/v1/${orgId}${path}`);
}

<script setup lang="ts">
import type { JsonApiResource } from "~/server/utils/skayle-cms";

type CmsPost = { title: string; slug: string; excerpt: string | null };

type ListResponse = {
	data: Array<JsonApiResource<CmsPost>>;
};

const { data, error } = await useFetch<ListResponse>("/api/blog-posts");

if (error.value) {
	throw createError({ statusCode: 500, statusMessage: "Failed to load blog posts" });
}
</script>

<template>
	<main>
		<h1>Blog</h1>
		<ul>
			<li v-for="post in data?.data || []" :key="post.id">
				<NuxtLink :to="`/blog/${post.attributes.slug}`">
					{{ post.attributes.title }}
				</NuxtLink>
			</li>
		</ul>
	</main>
</template>

import { fetchSkayle } from "~/server/utils/skayle-cms";

export default defineEventHandler(async () => {
	return fetchSkayle("/articles?status=published&orderby=date&order=desc&page=1&per_page=50");
});

<script setup lang="ts">
const route = useRoute();

const { data, error } = await useFetch(`/api/blog-posts/${route.params.slug}`);

if (error.value) {
	throw createError({ statusCode: 404, statusMessage: "Post not found" });
}
</script>

<template>
	<article v-if="data?.data">
		<h1>{{ data.data.attributes.title }}</h1>
		<p v-if="data.data.attributes.excerpt">{{ data.data.attributes.excerpt }}</p>
		<div v-html="data.data.attributes.content_html || ''" />
	</article>
</template>

import { fetchSkayle } from "~/server/utils/skayle-cms";

export default defineEventHandler(async (event) => {
	const slug = getRouterParam(event, "slug");
	return fetchSkayle(`/articles/${encodeURIComponent(slug || "")}?include=categories,tags,authors`);
});

export default defineEventHandler(async () => {
	return fetchSkayle("/collections/answers/items?status=published&page=1&per_page=50");
});