Using Sirv CDN with Nuxt

On this page

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: ''     
  4. That's it! Now you can enjoy the convenience of Nuxt Image and powerful image optimization and delivery options of Sirv.


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


Will render as:

<img src="" width="500" srcset=" 1x, 2x">

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

    watermark: '/watermark-v1.png',
    watermarkPosition: 'center',
    watermarkWidth: '30%',
This will return this image: Sirv watermark demo
<img class="Sirv" data-src="" 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.

Was this article helpful?

Related articles

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine