Nuxt/image Integration Guide

Since nuxt/image version 0.6.1 ImageEngine is a native provider of image optimization. This means that no additional packages has to be installed in your Nuxt project in order to start using ImageEngine. This article explains how to get started with Nuxt and ImageEngine.

Sign Up For ImageEngine

To implement ImageEngine’s image optimization for Nuxt, you will first need to sign up for an ImageEngine account, if you do not already have one. During the signup process, you will specify the website domain that will use ImageEngine and the origin URL for most images. If you don't have an origin url yet, don't worry, you can always change that later.

Once signed up, you will be issued a unique delivery address following this pattern: “aabbcc.cdn.imgeng.in”.

Take note of your delivery address, as we will need it in the next step.

Set Up Your Nuxt Project

Assuming that you already have a Nuxt project where you want to implement image optimization, the only addition needed is the official nuxt/image package. This package has built in, native support for ImageEngine. This process is well documented here.

Intall the @nuxt/image package:

yarn add --dev @nuxt/image

Next, add the module to buildModules in the nuxt.config file:

export default {
  target: 'static',
  buildModules: [
    '@nuxt/image',
  ]
}

Next step is to define your Delivery Address in the nuxt.config file:

export default {
  image: {
    imageengine: {
      baseURL: 'https://xxxxx.cdn.imgeng.in'
    }
  }
}

You'll find your Delivery Address in the ImageEngine control panel.

Using the ImageEngine provider

At this stage the project is set up to use ImageEngine for image optimization. Make sure to deploy the original images to the server location your engine (delivery address) is connected to. Using ImageEngine while developing on localhost will not work because ImageEngine can't reach the files on your computer.

Nuxt/image offers two built in image components: [<nuxt-img>](https://image.nuxtjs.org/components/nuxt-img) and <nuxt-picture>.

As <nuxt-picture> is usually used to multi-serve next-gen-formats, like AVIF and WEBP, you really only need to use <nuxt-img> because ImageEngine will automatically handle the format conversion on the fly.

In our code, a <nuxt-img> may look like this:

<nuxt-img
    provider="imageengine"
    src="/images/imageengine.png"
    width="3750"
    height="2500"
    sizes="xs:200px md:500px lg:1024"
/>

Note the provider="imageengine" line. This specifies ImageEngine as the image CDN for your site.

The generated markup from this <nuxt-img> will be something like this if your delivery address is xxxyyy111.cdn.imgeng.in:

<img data-v-2a183b29="" 
    src="https://xxxyyy111.cdn.imgeng.in/images/imageengine.png?imgeng=/w_1024/h_683" 
    width="3750" 
    height="2500" 
    sizes="(max-width: 320px) 200px, (max-width: 768px) 500px, 1024px" 
    srcset="https://xxxyyy111.cdn.imgeng.in/images/imageengine.png?imgeng=/w_200/h_133 200w, 
        https://xxxyyy111.cdn.imgeng.in/images/imageengine.png?imgeng=/w_500/h_333 500w, 
        https://xxxyyy111.cdn.imgeng.in/images/imageengine.png?imgeng=/w_1024/h_683 1024w">

ImageEngine supports all the standard props built into nuxt/image. Additional proprietary modifiers can be used like this:

<nuxt-img
    provider="imageengine"
    src="/images/imageengine.png"
    :modifiers="{ sharpen: '80', rotate:'90' }"
/>

This will display an image rotated 90 degrees and more sharpness added to it.

Optimizing External Images

If your app has images stored (origins) outside of the origin that is attached to the delivery address, you can still optimize these images by prefixing the image url.

To do this, make sure that:

1. Your engine [allows prefixing]

2. Add the allowed origins (hostnames) to your nuxt.config:

   export default {
     image: {
       imageengine: {
         baseURL: 'https://xxxxx.cdn.imgeng.in'
       },
       domains: ['example.com'],
     }
   }
   

This will produce image references like this:

https://xxxxx.cdn.imgeng.in/https://example.com/image.jpeg

Example

Here is a sample site running ImageEngine and nuxt/image. The code can be found here.

Other resources:

• Nuxt/image website
• ImageEngine Vue component