Urami

Appearance

Nuxt ​

Optimized image component for Nuxt with Nuxt Urami.

Install ​

  1. Add nuxt-urami dependency to your project
sh
$ npm add nuxt-urami
$ npm add nuxt-urami
sh
$ pnpm add nuxt-urami
$ pnpm add nuxt-urami
sh
$ yarn add nuxt-urami
$ yarn add nuxt-urami
sh
$ bun add nuxt-urami
$ bun add nuxt-urami
  1. Add nuxt-urami to the modules section of nuxt.config.ts
js
export default defineNuxtConfig({
  modules: ["nuxt-urami"],
});
export default defineNuxtConfig({
  modules: ["nuxt-urami"],
});

Usage ​

vue
<template>
  <UramiImage
    src="https://httpmemes.netlify.app/200.jpg"
    width="801"
    height="801"
    alt="Tom Scott"
  />
</template>
<template>
  <UramiImage
    src="https://httpmemes.netlify.app/200.jpg"
    width="801"
    height="801"
    alt="Tom Scott"
  />
</template>

Props ​

NameTypeDefaultRequiredDescription
srcstring-✅Source of the image
widthnumber-✅Width of the image
heightnumber-❌Height of the image (Specify this will results in less layout shift)
qualitynumber75❌Quality of the image
loaderfndefaultLoader❌Loader function, please refer to Loader

Options ​

Configure Nuxt Urami with urami property.

TIP

All of these options are optional.

Except storePath which has default value is .nuxt-urami/images.

ts
export default {
  urami: {
    handlerConfig: {
      remoteDomains: ["httpmemes.netlify.app"],
      allowedDomains: ["nuxt-urami.netlify.app"],
      ttl: 1000 * 60 * 60 * 24 * 7,
      storePath: ".nuxt-urami/images", // default value
    },
  },
};
export default {
  urami: {
    handlerConfig: {
      remoteDomains: ["httpmemes.netlify.app"],
      allowedDomains: ["nuxt-urami.netlify.app"],
      ttl: 1000 * 60 * 60 * 24 * 7,
      storePath: ".nuxt-urami/images", // default value
    },
  },
};

Learn more about overwriting the urami configuration in the Urami Config section.