Nuxt•2mo ago

How can i define custom request headers to Nuxt Image in order to Cache properly?

My request are being executed with "cache-control": "no-cache" i could easily change this on $fetch but dont know how to do it on Nuxt Image module. Im using the cloudinary provider, but cache also doesent work with static images

2 Replies

kapa.ai•2mo ago

Hi @Bruno Belloni. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To define custom request headers for Nuxt Image and properly cache images, including those from the Cloudinary provider, you can use the provider option along with the modifiers property. Here's how you can approach this: 1. For Cloudinary provider: You can use the customFunc modifier to add custom headers to your Cloudinary requests. Here's an example:

<template>
  <NuxtImg
    provider="cloudinary"
    src="/remote/nuxt-org/blog/going-full-static/main.png"
    width="300"
    height="169"
    :modifiers="{
      customFunc: 'set_header:Cache-Control=max-age=31536000'
    }"
  />
</template>

<template>
  <NuxtImg
    provider="cloudinary"
    src="/remote/nuxt-org/blog/going-full-static/main.png"
    width="300"
    height="169"
    :modifiers="{
      customFunc: 'set_header:Cache-Control=max-age=31536000'
    }"
  />
</template>

This approach uses Cloudinary's custom functions to set the Cache-Control header Cloudinary modifiers (https://image.nuxt.com/providers/cloudinary#customfunc). 2. For static images and other providers: For static images or other providers, you might need to configure the caching behavior at the server level using Nitro's route rules. You can add this to your nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/assets/**': { headers: { 'cache-control': 'max-age=31536000' } },
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/assets/**': { headers: { 'cache-control': 'max-age=31536000' } },
    }
  }
})

This configuration will apply the specified cache-control header to all routes under /assets/ Routing (https://nitro.unjs.io/config#routerules). 3. Global caching strategy: If you want to apply a global caching strategy for all your images, you can use Nitro's route rules with a more general pattern:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_nuxt/image/**': { cache: { maxAge: 60 * 60 * 24 * 365 } }, // Cache for 1 year
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_nuxt/image/**': { cache: { maxAge: 60 * 60 * 24 * 365 } }, // Cache for 1 year
    }
  }
})

This will cache all Nuxt Image requests for one year Caching route rules (https://nitro.unjs.io/guide/cache#caching-route-rules). Remember that caching strategies should be carefully considered based on your specific use case and how frequently your images change. The examples provided set long cache times, which are suitable for static content that doesn't change often. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@305751470047887370> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How can i define custom request headers to Nuxt Image in order to Cache properly?