Using Sirv CDN with Nuxt

Take advantage of the simplicity of Nuxt Image and power of Sirv with the official Nuxt/Image module. Your original Nuxt Image props will automatically translate to Sirv URL parameters.

Listed below are more than 100 options to scale, crop and apply watermarks, text and other effects. Try all the options in the dynamic imaging demo.

Live Nuxt demo

Play with the Nuxt Image live demo in your browser on StackBlitz or CodeSandbox.

Or you can check out a statically generated version here.

Getting started

1. Install the @nuxt/image module by following the instructions here.
2. Sign up for a Sirv account if you haven't already, and grab your account name from the settings page.
3. Add your base Sirv URL to your Nuxt config file:

   // nuxt.config.ts
     image: {
       sirv: {
         baseURL: 'https://youralias.sirv.com/'     
       }  
     }
   

4. That's it! Now you can enjoy the convenience of Nuxt Image and powerful image optimization and delivery options of Sirv.

Usage

Sirv will automatically pick up standard Nuxt Image parameters like width, format, fit, quality and so on. E.g, this code:

<NuxtImg
  provider="sirv"
  src="/harris.jpg"
  width="500"
  format="png"
/>

Will render as:

<img src="https://demo.sirv.com/harris-large.jpg?w=500&format=png" width="500" srcset="https://demo.sirv.com/harris-large.jpg?w=500&format=png 1x, https://demo.sirv.com/harris-large.jpg?w=1000&format=png 2x">

To use Sirv specific parameters, you can use the modifiers prop, here's an example:

<NuxtImg 
  provider="sirv" 
  src="t-shirt-man.jpg" 
  height="500"
  :modifiers="{
    watermark: '/watermark-v1.png',
    watermarkPosition: 'center',
    watermarkWidth: '30%',
  }" 
/>

This will return this image:

<img class="Sirv" data-src="https://demo.sirv.com/t-shirt-man.jpg?watermark=/watermark-v1.png&watermark.position=center&watermark.scale.width=30%&h=500" alt="Sirv watermark demo">

Full list of options

Here's a full list of available modifiers:

Get expert help

If you need help using Sirv with Nuxt Image, please contact us. We love helping users and always reply within 24 hours.