@nuxtjs/cloudinary
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    @nuxtjs/cloudinary

    @nuxtjs/cloudinary

    npm version npm downloads Github Actions CI Codecov License

    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

    📖  Read more

    Quick Setup

    1. Add @nuxtjs/cloudinary dependency to your project
    # using yarn
    yarn add @nuxtjs/cloudinary 
    
    # using npm
    npm install @nuxtjs/cloudinary
    1. 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

    Install

    npm i @nuxtjs/cloudinary

    DownloadsWeekly Downloads

    1,348

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    22.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar