Skip to content
Svelte Cloudinary

Configuring Svelte Cloudinary

Using Environment Variables

The following environment variables are available in Vite/Sveltekit projects:

Environment VariableDescription
VITE_CLOUDINARY_CLOUD_NAMEThe cloud name of your product environment (required)
VITE_CLOUDINARY_API_KEYUsed to authenticate image upload requests
VITE_CLOUDINARY_PRIVATE_CDNSet to true if you’re an Advanced Plan user with a private CDN distribution
VITE_CLOUDINARY_SECURE_DISTRIBUTIONThe custom delivery hostname for Advanced Plan users with a private CDN distribution
VITE_CLOUDINARY_UPLOAD_PRESETA 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.

<script>
  import { configureCloudinary } from 'svelte-cloudinary';


  configureCloudinary({
    cloudName: 'cloudName',
  });
</script>
// Component-level config options
interface ConfigOptions {
  cloud?: {};
  url?: {};
}


// Global config options
interface GlobalCloudinaryConfig extends ConfigOptions {
  analytics?: AnalyticsOptions;
  uploadPreset?: string;
  cloudName?: string;
  apiKey?: string;
}

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).

<script>
  import { CldImage } from 'svelte-cloudinary';
</script>


<CldImage config={{ cloud: { cloudName: 'cloudName' } }} />

Priority

Config options are used in the following order: