SvelteKit ​

Example

Here're the steps to integrate Urami with SvelteKit.

Install ​

There're 2 packages need to be installed in order to use Urami with SvelteKit. @urami/core for server endpoints, and @urami/svelte for client-side components.

Additionally, you need to install sharp as well. This is because @urami/core uses sharp to optimize images, and it's a peer dependency so it won't installed by default.

$ npm add @urami/core @urami/svelte sharp

$ npm add @urami/core @urami/svelte sharp

$ pnpm add @urami/core @urami/svelte sharp

$ pnpm add @urami/core @urami/svelte sharp

$ yarn add @urami/core @urami/svelte sharp

$ yarn add @urami/core @urami/svelte sharp

$ bun add @urami/core @urami/svelte sharp

$ bun add @urami/core @urami/svelte sharp

Server endpoints ​

Create a file routes/api/_image/+server.ts, which is a server endpoint for Urami. This endpoint will be used to serve optimized images.

import { createRequestHandler } from "@urami/core";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET = (event) => handler(event.request);

import { createRequestHandler } from "@urami/core";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET = (event) => handler(event.request);

import { createRequestHandler } from "@urami/core";

import type { RequestHandler } from "@sveltejs/kit";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET: RequestHandler = (event) => handler(event.request);

import { createRequestHandler } from "@urami/core";

import type { RequestHandler } from "@sveltejs/kit";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET: RequestHandler = (event) => handler(event.request);

For server configuration, please refer to Configuration.

Client-side component ​

Import Image component from @urami/svelte and use it like next/image.

<!-- +page.ts -->
<script>
  import Image from '@urami/svelte'
</script>

<Image
  src="https://demo.rayriffy.com/tom-scott.jpg"
  width={801}
  height={801}
  alt="Tom Scott"
  class="rounded-xl shadow-md"
/>

<!-- +page.ts -->
<script>
  import Image from '@urami/svelte'
</script>

<Image
  src="https://demo.rayriffy.com/tom-scott.jpg"
  width={801}
  height={801}
  alt="Tom Scott"
  class="rounded-xl shadow-md"
/>

For client-side configuration, please refer to Svelte.