SvelteKit

{
  "runtime": { "framework": "sveltekit" }
}

npm install fimo fimo-sveltekit

import { sveltekit } from '@sveltejs/kit/vite';
import { fimo } from 'fimo-sveltekit/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [fimo(), sveltekit()] });

// svelte.config.js
import { fimo } from 'fimo-sveltekit/config';

export default {
  kit: { adapter: fimo() },
};

import { createFimo } from 'fimo-sveltekit';
import { content } from '../../../schemas';

export async function load(event) {
  const fimo = createFimo({ content, event });
  const result = await fimo.articles.list({ limit: 12 });
  return { articles: fimo.articles.serialize(result.items) };
}

import { getLabels } from 'fimo-sveltekit';

export async function load(event) {
  // If the app resolves a locale from its URL or session, pass it:
  // const locale = resolveLocale(event.url); // your app's resolver
  // return { labels: await getLabels({ event, locale }) };

  // Otherwise, omit it and use the Fimo project default.
  return { labels: await getLabels({ event }) };
}

<script lang="ts">
  import { FimoProvider } from 'fimo-sveltekit/components';
  import type { LayoutData } from './$types';
  import type { Snippet } from 'svelte';

  let { data, children }: { data: LayoutData; children: Snippet } = $props();
</script>

<FimoProvider labels={data.labels}>
  {@render children()}
</FimoProvider>

<script lang="ts">
  import { Image, RichText, Text } from 'fimo-sveltekit/components';
</script>

<Text value={article.title} as="h1" />
<RichText value={article.body} />
<Image value={article.cover} />