Getting Started

Installation

1. Add @nuxtjs/cloudinary dependency to your project:

yarn add @nuxtjs/cloudinary

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

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

3. Create .env file with following CLOUDINARY_CLOUD_NAME variable:

CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>

Don't have a Cloudinary account? Sign up for free on cloudinary.com!

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

Options

Configure Nuxt Cloudinary easily with the cloudinary property.

export default {
  cloudinary: {
    cloudName: 'fesfese4324',
    uploadPreset?: 'my-custom-preset',
    apiKey?: '12345',
    analytics?: true,
    cloud?: {},
    url?: {},
  }
}

cloudName

• Default: process.env.CLOUDINARY_CLOUD_NAME

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

uploadPreset

• Default: -

For example: my-upload-preset. Used with CldUploadWidget and CldUploadButton components

apiKey

• Default: -

For example: 12345. Used with CldMediaLibrary component.

analytics

• Default: true

Enabling Cloudinary analytics.

cloud

• Default: -

Top level configuration used for all composables and components. Check out all available options here

url

• Default: -

Top level configuration used for all composables and components. Check out all available options here

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.