Astro ​

Example

Here're the steps to integrate Urami with Astro.

Quick install ​

Use astro add to install @urami/astro package. This will automatically install dependencies, and add integration to astro.config.mjs.

$ npx astro add @urami/astro

$ npx astro add @urami/astro

$ pnpm astro add @urami/astro

$ pnpm astro add @urami/astro

$ yarn astro add @urami/astro

$ yarn astro add @urami/astro

Manual install ​

First, install @urami/astro package.

$ npm add @urami/astro

$ npm add @urami/astro

$ pnpm add @urami/astro

$ pnpm add @urami/astro

$ yarn add @urami/astro

$ yarn add @urami/astro

Then, apply integration to astro.config.mjs. It's important to have output: 'server' in order to use Urami.

import { defineConfig } from 'astro/config'

import urami from '@urami/astro' 

// https://astro.build/config
export default defineConfig({
  output: 'server', 
  integrations: [
    urami(), 
  ],
})

import { defineConfig } from 'astro/config'

import urami from '@urami/astro' 

// https://astro.build/config
export default defineConfig({
  output: 'server', 
  integrations: [
    urami(), 
  ],
})

Image component ​

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

---
import Image from '@urami/astro/image'
---

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

---
import Image from '@urami/astro/image'
---

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