Skip to main content
Nuxt Secure uses Cloudinary to store and serve user profile photos. The photo URL is saved in the imagenUrl field of the usuario table.
Cloudinary is optional. If it is not configured, profile photo uploads will be unavailable, but all other features will continue to work.

​
Setup

1

Create a Cloudinary account

Go to cloudinary.com and sign up for a free account.
2

Find your credentials

In the Cloudinary dashboard, go to Settings > API Keys. You will find your Cloud Name, API Key, and API Secret there.
3

Add credentials to your .env file

.env
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

​
How it works in the app

Profile photo uploads follow this flow:
  1. The user selects an image in the browser.
  2. compressorjs (^1.2.1) compresses the image client-side before upload.
  3. The compressed image is sent to a server API route.
  4. The server uses the cloudinary package (^2.9.0) to upload the image to Cloudinary.
  5. Cloudinary returns a URL for the uploaded image.
  6. The URL is saved to usuario.imagenUrl in the database.

​
Security

All three Cloudinary credentials (CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET) are mapped into Nuxt’s server-side runtimeConfig and are never exposed to the browser:
nuxt.config.ts
runtimeConfig: {
  cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
  cloudinaryApiKey: process.env.CLOUDINARY_API_KEY,
  cloudinaryApiSecret: process.env.CLOUDINARY_API_SECRET,
}
Access them in server routes via useRuntimeConfig():
server/api/upload.post.ts
const config = useRuntimeConfig()

const cloudinaryClient = new Cloudinary({
  cloud: {
    cloudName: config.cloudinaryCloudName,
    apiKey: config.cloudinaryApiKey,
    apiSecret: config.cloudinaryApiSecret,
  },
})
Never place Cloudinary credentials in the public block of runtimeConfig. Doing so would expose your API secret to anyone who visits the site.

Build docs developers (and LLMs) love

Get started for freeTalk to us