Integrating Cloudinary with Nuxt

Nuxt is a Vue-based web framework that gives developers simple, yet powerful tools for web development.

Cloudinary can help Nuxt developers build richer, performance-first visual experiences by leveraging automatic optimization and media management tools like uploading included in the Cloudinary suite.

Using Cloudinary with Nuxt

There are multiple options for integrating Cloudinary with a Nuxt app.

Nuxt Cloudinary

Nuxt Cloudinary is a community-built solution for using Cloudinary in a Nuxt project giving you the ability to automatically optimize images and add transformations like dynamic cropping and resizing.

> Important: Community-developed libraries are developed, tested and maintained by the community. Bug fixes and feature requests should be submitted in the relevant repository.

The CldImage component wraps the Unpic Vue Image component, giving a core set of image loading standards, extending it with the power of Cloudinary tech.

This includes features beyond automatic optimization like dynamic cropping and resizing, background removal, and image and text overlays.

For basic usage, first install the package with:

npm install @nuxtjs/cloudinary

Add Nuxt Cloudinary to your Nuxt modules:

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

Create a `.env` file with your Cloudinary environment variables:

CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"

And use the component in your project:

<CldImage
  width="600"
  height="600"
  src="<Public ID>"
  alt=”<Description>”
/>

Learn more about all of the components and features at: https://cloudinary.com/documentation/vue_integration

Using the Nuxt Image component

The Nuxt Image component supports loading Cloudinary as an external provider, gaining access to some of the basic features like automatic optimization.

The only configuration that is needed on top of setting up Nuxt Image is setting up the `cloudinary` property inside of your Nuxt config with the appropriate base URL.

For example:

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<Your Cloud Name>/image/upload/'
    }
  }
})

For more information on how to use the Nuxt Image component with Cloudinary, head over to the Nuxt docs.

Building Image & Video URLs with the Cloudinary JavaScript SDK

The JS URL Gen SDK allows developers to integrate with Cloudinary in any JavaScript-based applications.

You can use the JavaScript SDK to generate image and video URLs along with any transformations you want.

To get started, first install the JavaScript SDK with:

npm install @cloudinary/url-gen

Set up a new instance of Cloudinary with your cloud’s configuration:

import { Cloudinary } from '@cloudinary/url-gen';
const cld = new Cloudinary({
  cloud: {
    cloudName: '<Your Cloud Name>'
  }
}); 

Then use one of the available methods to generate your asset URL such as:

const myImage = cld.image('<Public ID>').format('auto').quality('auto').toURL().

Which will build an image URL that will use automatic optimization.

Learn more over on the Cloudinary Docs.

Uploading & Managing Media Assets with the Cloudinary Node.js SDK

When working in a Nuxt application, you gain access to server tools that allow you to work in a Node.js environment.

Inside Node, you can take advantage of the Cloudinary Node.js SDK to upload files and interact with other Cloudinary APIs like search and administration.

To get started, first install the Cloudinary Node.js SDK:

npm install cloudinary

Configure the package and your Cloudinary account:

const cloudinary = require('cloudinary').v2;
# or

import { v2 as cloudinary } from 'cloudinary';
cloudinary.config({
  cloud_name: '<Your Cloud Name>',
  api_key: '<Your API Key>', // Store in .env.local
  api_secret: '<Your API Secret'>, // Store in .env.local
  secure: true
});
const result = await cloudinary.uploader.upload('/path/to/image');

> Note: Avoid storing your credentials directly in the code to avoid compromising your account. Use environment variables instead to securely use your API key, API secret, and optionally your Cloud Name within your application.

Learn more over on the Cloudinary Docs.

More Resources

Learn more about how to use Cloudinary with Svelte:

• Uploading Images & Videos in Vue.js with the Cloudinary Upload Widget
• Vue Code Examples