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

Download Details:

Author: nuxt-community

Demo: https://cloudinary.nuxtjs.org/

Source Code: https://github.com/nuxt-community/cloudinary-module

#vuejs #vue #nuxtjs #javascript