Transform your images easily in Vue & Nuxt with Cloudinary

I always thought that you can only transform and modify images by using some kind of advanced design tool like Photoshop and in order to do so, you basically have to be a designer. And in many cases, I wanted to utilize even a simple remove background functionality which was not possible for me.

But then, I found out that Cloudinary offers many useful transformations for your images that make them 10 times better with a simple property or boolean value.

In this article, I wanted to show you some of the cool examples of image transformations in Vue & Nuxt apps with Cloudinary 🚀

Enjoy!

🤔 Using Cloudinary in Nuxt

There are two ways of using Cloudinary in Nuxt apps:

1. Using Nuxt Image module
2. Using Nuxt Cloudinary module

Why two? Because they are meant to be used for different cases. The first approach allows you to use Cloudinary as your image provider and in general it works really well but the main aim of it is to serve as a way to delivering performant and optimized images. For this use case, the image module works great, however it does not deliver that many useful transformations options due to limited (agnostic) API.

Nuxt Cloudinary on the other hand, allows you to utilize many interesting image transformations like:

• Removing background
• Underlays and Overlays
• Generative AI (fill background, replace, recolor, remove)
• Filters and Effects

In general, if you want to use Cloudinary just for optimized images, the Nuxt Image module will probably be the best solution. However if you would like to have some advanced and cool looking transformations, I would highly recommend to use the Nuxt Cloudinary module 💚

🏞️ Image Transformations

As I mentioned previously, Cloudinary allows you to utilize powerful transformations API to do almost anything with your images. Below, I wanted to list some of the best image transformations that I have managed to do right now with some code examples.

Multiple Effects

Apply multiple visual effects to one image

  <CldImage
    src="images/turtle"
    width="900"
    height="900"
    alt="Sample Product"
    crop="fill"
    :effects="[
      {
        background: 'green',
      },
      {
        gradientFade: true,
      },
      {
        gradientFade: 'symetric,x_0.5',
      },
    ]"
  />

Generative AI Recolor

Change color of an element on the image (shoelaces were originally white)

  <CldImage
    src="images/sneakers"
    width="900"
    height="900"
    alt="Sample Product"
    crop="fill"
    :recolor="['shoelaces', 'purple']"
  />

Generative AI Fill Background

Extend the image with AI generated background (first image is an originall image, the second one is transformed with Generatite AI)

  <CldImage
    src="images/sneakers"
    width="1200"
    height="1200"
    alt="Sample Product"
    crop="fill"
    fillBackground
  />

And many many more! Check out the documentation for more examples! 🚀

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use Cloudinary to deliver amazingly transformed images in your Vue & Nuxt apps.

Take care and see you next time!

And happy coding as always 🖥️