@nuxtjs/cloudinary

Cloudinary integration with for NuxtJS

Features

On-the-fly url generating for images and videos
On-the-fly size optimization per browser and device
Pre-generate url generation for images and videos on build
Fast loading speed with progressive images
Auto-detect the optimized format per browser for images and videos
Dynamically fetch and transform images and videos from remote sources
Reactive transformations on images and videos
Upload images and videos
Minimum configuration required to set up Cloudinary and running

Quick Setup

Add @nuxtjs/cloudinary dependency to your project

# using yarn
yarn add @nuxtjs/cloudinary 

# using npm
npm install @nuxtjs/cloudinary

Add @nuxtjs/cloudinary to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    '@nuxtjs/cloudinary',

    // With options
    ['@nuxtjs/cloudinary', { /* module options */ }]
  ]
}

Or a separate section cloudinary for module options:

{
  modules: [
    // Simple usage
    '@nuxtjs/cloudinary',
  ],
  cloudinary: {
    cloudName: '<your-cloudinary-cloudname>',
    /* all other options */
  }
}

See module options.

Build URLs and Tags for images/videos

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

Simple use example:

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

See Usage - Build Image URLs and Tags.

Client components

This module uses the official Vue components built for Cloudinary and registers the following components for use in the application: CldImage, CldVideo and other supportive components.

See Usage - Vue components.

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

Maintained by Maya Shavin