How to use Cloudinary Images with Nuxt 3
Tags: javascript, vue, beginners, tutorial
Published: 2022-10-03 10:03:20

I recently had a chance to interview @colbyfayock during the Geekle JS Global Summit where we talked about Image Optimization with Cloudinary. Colby is a huge fan of Next.js. I was really interested in this topic and decided to dive into the topic and write an article how you can optimize images with Cloudinary in my favourite JS Framework - Nuxt 3.

To integrate easily with Cloudinary we will be using Nuxt Image module. This article is based on the one created by Colby but with Nuxt instead of Next. The original article you can read [here](https://spacejelly.dev/posts/how-to-use-cloudinary-images-in-next-js-with-blurred-placeholders/)

## What is Nuxt Image?

Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN. You can check the `@nuxtjs/image` documentation [here](https://v1.image.nuxtjs.org/).

![Nuxt Image Module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzouc9kjmhbrdrv1k5z6.png)

## What is Cloudinary?
Cloudinary is a media management solution that not just allows teams to manage, optimize, and transform images, but video as well.

There are a ton of cool things you can do with Cloudinary, such as automatically generating social media images or at it’s simplest, using Cloudinary as a CDN. It also makes for a great way to smooth out a project workflow for designers and developers to manage and use images.

## Coding time!

First of all, let's generate an empty Nuxt 3 project:

```bash
npx nuxi init nuxt-cloudinary
```

Your project structure should look like this:

![Nuxt 3 Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/705m54cq7stmet8xs1oq.png)

Now, let's install the `@nuxt/image-edge` module in our project:

```bash
yarn add --dev @nuxt/image-edge
```

Next, let's register the module in our `nuxt.config.ts` file:

```ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    '@nuxt/image-edge',
  ]
})
```

And that's it for the module. If you would like to use the default IPX provider, that you can check out [here](https://v1.image.nuxtjs.org/providers/ipx), that would have been all for the configuration. However, if you need more options, like we do in this tutorial, we will add the image object to our `nuxt.config.ts` file with the proper Cloudinary configuration.

```ts
image: {
  // Options
}
```

After registering the `@nuxtjs/image-edge` module in our `nuxt.config.ts` file we now have access to both `nuxt-img` and `nuxt-picture` components that will handle the image optimization for us. In this tutorial, we will be using the `NuxtImg` component only but feel free to play with both of them:

![Nuxt Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kltz0f796knctvc6td89.png)

## Short Intro to Cloudinary

After logging in to Cloudinary website, you will see the dashboard that will look similar to the one below:

![Cloudinary Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvlk34gwq17qq4glrysg.png)

Cloudinary is a Digital Asset Management so you can expect many different functionalities to be available there. I highly encourage you to try it out as in this tutorial we will be only using some of the functionalities. Below, you can see the media gallery that we will be using to fetch the optimized images from.

![Cloudinary Media Gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtaxurfz64to8t5hv89r.png)

Make sure to copy the image path as we will be using it further in the app. In my case, the link was as following:

```
https://res.cloudinary.com/${YOUR_SPACE_ID}/image/upload/${YOUR_FOLDER_ID}/cld-sample-5.jpg
```

## To the code again!

Let's configure the image module to work with the Cloudinary service. We will just pass the `baseURL` property in the `cloudinary` object as it is the only one needed to make the integration work:

```ts
// nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxt/image-edge',
      ],
      image: {
        cloudinary: {
            baseURL: 'https://res.cloudinary.com/${YOUR_SPACE_ID}/image/upload/${YOUR_FOLDER_ID}'
        }
      }
})
```

To see how it works in the browser, let's modify the `app.vue` code so that it looks like the following:

```html
// app.vue

<template>
  <div>
    <h1>Image cld-sample-5.jpg from Cloudinary</h1>
    <nuxt-img provider="cloudinary" src="/cld-sample-5.jpg" />
  </div>
</template>
```

When you switch to your browser, you should see something like this.

![Cloudinary Image in Nuxt 3 App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xteeli5rj0gjqe5n2b6r.png)

Right now, we know that the integration works because we can fetch images directly from Cloudinary. Let's apply width/height and some modifiers to the image so that it looks a bit better:

```html
    <nuxt-img
      provider="cloudinary"
      src="/cld-sample-5.jpg"
      width="300"
      height="169"
      :modifiers="{ roundCorner: 'max', effect: 'grayscale' }"
    />
```

Let's see in the browser how our modified image looks like:

![Modified Cloudinary Image in Nuxt 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ryagpqy1hqex5fg27qo.png)

*If you are interested in the all available modifiers, check out the documentation [here](https://v1.image.nuxtjs.org/providers/cloudinary)*

## Summary

Well done! You have just integrated Cloudinary with your Nuxt 3 project. Keep in mind however, that this is only the tip of the Iceberg in terms of Image optimization and manipulation so make sure to dive deeper into Image Optimization contept and Cloudinary service.