Configuring Svelte Cloudinary
Using Environment Variables
The following environment variables are available in Vite/Sveltekit projects:
Environment Variable | Description |
---|---|
VITE_CLOUDINARY_CLOUD_NAME | The cloud name of your product environment (required) |
VITE_CLOUDINARY_API_KEY | Used to authenticate image upload requests |
VITE_CLOUDINARY_PRIVATE_CDN | Set to true if you’re an Advanced Plan user with a private CDN distribution |
VITE_CLOUDINARY_SECURE_DISTRIBUTION | The custom delivery hostname for Advanced Plan users with a private CDN distribution |
VITE_CLOUDINARY_UPLOAD_PRESET | A global upload preset for use with image uploading |
Config Helper
The configureCloudinary
function can be used to set options globally. This is useful when environment variables or certain options are unavailable. It uses the Svelte context api
, so it needs to be called in your root Svelte component (or root layout in SvelteKit). Since context flows downwards in Svelte, a component that uses any components/helpers must be a child of this root component in order to detect the config set by the configureCloudinary
function.
Config Overrides
All components accept a config
prop for setting / overriding individual Cloudinary ConfigOptions
options. However, this doesn’t include shortcuts (like the global config’s top level cloudName
and apiKey
options, for example).
Priority
Config options are used in the following order:
- Options overrides
configureCloudinary
:.cloudName
and.apiKey
configureCloudinary
:.cloud
and.url
- Environment variables