dannyfeliz / cloudinary-module

Integration of Cloudinary to Nuxt.js

@nuxtjs/cloudinary

Cloudinary integration with for NuxtJS

• ✨  Release Notes
• 📖  Documentation

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

📖  Read more

Quick Setup

1. Add @nuxtjs/cloudinary dependency to your project

# using yarn
yarn add @nuxtjs/cloudinary 

# using npm
npm install @nuxtjs/cloudinary

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

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c)

Maintained by Maya Shavin