Optimized Images in Nuxt with Cloudinary

Some time ago, @colbyfayock messaged me on Twitter to talk about potential Cloudinary + Nuxt community work. As I really love to work on the community projects, I instantly agreed to meet and talk what we can do to make this partnership and integration better.

Just to be clear, previously there was already a really nice integration between Cloudinary and Nuxt created by @mayashavin_44. It was a really great project that was used widely in Nuxt ecosystem. But, new version of Nuxt came (3.0) and with it, a new interface and new architecture and because of that, many of the modules / integrations was not compatible with newly released version. From this point, I would like to appreciate all the work that Maya put into this module. Kudos to you 💚

Colby then reached me to ask if I would be interested in helping in migrating the module and becoming an official maintainer of it. I talked to Nuxt core team and decided that it is indeed a great idea, so I started working on this new version. And today this is also what I want to show in this article. This new integration between Cloudinary & Nuxt to give you the ability to easily deliver performant and optimized images ⚡️

What is NuxtCloudinary?

NuxtCloudinary is an integration module between Cloudinary Digital Asset Management System and Nuxt Framework. It delivers great Developer Experience by automating a lot of the repetitive work so that you as a user can focus on what matters -> Delivering great experience to your users!

To see the official documentation, head to https://cloudinary.nuxtjs.org:

Here you will see all the available features of the new version of the module. Keep in mind that it is not the end so new features will appear from time to time -> Stay tuned!

But thanks to this module, you can do magic such as the one below:

If you are interested in learning more about Cloudinary & Image optimizations, check out my other article here

Usage

The usage of the module is relatively simple.

First of all, you need to install the @nuxtjs/cloudinary package:

yarn add @nuxtjs/cloudinary

Next, add this package to modules array in nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['@nuxtjs/cloudinary']
})

Finally, let's add CLOUDINARY_CLOUD_NAME environment variable:

CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>

And that's it! You are now ready to start working with Cloudinary in Nuxt. It is especially easy with the autoimported CldImage.vue component:

<template>
  <CldImage
    src="cld-sample-5"
    width="987"
    height="987"
    alt="My Awesome Image"
  />
</template>

And you should get the following result in the browser:

Summary

Nicely done! By following these simple steps, you have integrated Cloudinary into your Nuxt application. Now, you can start delivering performant and optimized images to your users! Let us know here or in the module repository about new features that you would like us to add to the module :)