Build URLs and Tags

This module globally injects $cloudinary instance. You can access it anywhere using this.$cloudinary (within a component), or context.$cloudinary (for plugins, asyncData, fetch, nuxtServerInit and middleware).

Methods

$cloudinary(assetType?)

• assetType
  • Type: String
  • Default: image
  • Accepted values: image, video
• Return an Object with methods designated for certain asset type passed (image or video).

Below are the available methods of the returned object.

url(publicId, options?)

• publicId
  • Type: String
  • required
• options
  • Type: Object

Return a String as the delivery URL of an asset (image or video) based on its publicId and options for additional effects/transformations to apply to the original version stored in Cloudinary.

const url = this.$cloudinary()
                .url('sample', { crop: 'scale', width: 200 })

element(publicId, options?)

• publicId
  • Type: String
  • required
  • Path to the original asset stored in Cloudinary.
• options
  • Type: Object
  • Additional effects/transformations to apply to the original asset on delivery

Returns an Object containing the following properties:

• name
  • Type: String
  • HTML element for the created media element - video or img
• publicId
  • Type: String
  • Path to the original asset stored in Cloudinary.
• transformation()
  • Type: Function
  • Returns an Object containing the given effects/transformations.
• toHtml()
  • Type: Function
  • Return a String as HTML media tag with the generated delivery URL.
• toDOM()
  • Type: Function
  • Return a DOM element to inject the DOM tree dynamically.

const element = this.$cloudinary()
                    .element('sample', { crop: 'scale', width: 200 })
                    .toHtml()

More information can be found in the official Cloudinary documentation.

fetchRemote(url, options?)

• url
  • Type: String
  • required
  • Valid URL path to an image or video
• options
  • Type: Object
  • Additional effects/transformations to apply to the original asset on delivery

Returns String as the Cloudinary delivery URL for the requested asset.

const url = this.$cloudinary()
              .fetchRemote(
                'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
                { crop: 'scale', width: 200 })

config(options)

• options
  • Type: Object
  • Configuration options for Cloudinary.

Overwrite the default Cloudinary configurations setup defined in nuxt.config.js.

const url = this.$cloudinary()
                .config({
                  cloudName: 'your-new-cloud-name'
                })