[FIXED] How to use privateRuntimeConfig .env inside nuxt.config.ts for the Cloudinary module?

Issue

This might be a really dumb question, but while trying to setup Cloudinary on my Nuxt application, I couldn't figure out how to utilise privateRuntimeConfig to pass the necessary keys to the Cloudinary plugin, because all of it is happening inside nuxt.config.ts.

Meaning, that at the same place where I use privateRuntimeConfig, inside nuxt.config.ts, is also where I need to pass them to the Cloudinary plugin configuration, but this won't work. So how do I go about this?

export default defineNuxtConfig({
    privateRuntimeConfig: {
        cloudinary: {
            cloudName: process.env.CLOUDINARY_CLOUD_NAME,
            apiKey: process.env.CLOUDINARY_API_KEY,
            apiSecret: process.env.CLOUDINARY_API_SECRET
        }
    },
    cloudinary: {
        cloudName: '', // ??
        apiKey: '', // ??
        apiSecret: '', // ??
    }
})

I feel like there is an obvious solution to this that I currently just can't see because there is a knot in my brain.

Solution

When using variables for modules like here (directly into nuxt.config.js/ts), you cannot reference the runtime variables.

Simply use it directly like process.env.CLOUDINARY_CLOUD_NAME.
More info on my complete answer here: https://stackoverflow.com/a/67705541/8816585

Answered By - kissu

Answer Checked By - Marilyn (PHPFixing Volunteer)