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:
- Using Nuxt Image module
- 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 π₯οΈ
Top comments (0)