Getting Started - Nuxt Cloudinary

Installation

Add @nuxtjs/cloudinary dependency to your project:

yarn add @nuxtjs/cloudinary

Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ["@nuxtjs/cloudinary"],
});

Create .env file with following CLOUDINARY_CLOUD_NAME variable:

CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>

And that's it! You can now use Clodinary in Nuxt ✨

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

Options

Configure Nuxt Cloudinary easily with the cloudinary property.

nuxt.config

export default {
  cloudinary: {
    cloudName: 'fesfese4324',
  }
}

`cloudName`

Default: process.env.CLOUDINARY_CLOUD_NAME

Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard.

NuxtCloudinary vs Nuxt Image

You may be wondering what is the reason to have both Nuxt Cloudinary and Nuxt Image modules if they both have integration with Cloudinary and they tackle the aspect of optimized images.

This is a good question that should be answered by showing examples when one module is better than the other:

If you need just an optimized image/picture component with ability to connect to various providers (including Cloudinary) you may use Nuxt Image.

However, if you are looking for a solution that would allow you to use advanced AI powered image transformations, optimized videos, OG Images, and prebuilt components like ProductGallery, MediaLibrary, or UploadWidget, Nuxt Cloudinary will be a better solution for you.