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

2.6.0 • Public • Published

@nuxtjs/cloudinary

@nuxtjs/cloudinary

npm version npm downloads Github Actions CI Codecov License

Cloudinary integration with for Nuxt

This is a module for version 3.X of Nuxt. If you are looking for Nuxt 2.X support check out the following branch and the legacy documentation here

Features

  • Nuxt 3 ready
  • Useful CldImage, CldOgImage & CldVideoPlayer components
  • Handy useCldImageUrl composable
  • Automatically optimize images and deliver in modern formats
  • Remove backgrounds from images
  • Dynamically add image and text overlays to images

📖  Read more

Quick Setup

  1. Add @nuxtjs/cloudinary dependency to your project
yarn add @nuxtjs/cloudinary 
npm install @nuxtjs/cloudinary
  1. Add @nuxtjs/cloudinary to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/cloudinary'],
})

See module options for more configuration options.

  1. Create .env file with following CLOUDINARY_CLOUD_NAME variable:
CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>

And that's it! You can now use Cloudinary in Nuxt ✨

<template>
  <CldImage
    src="cld-sample-5"
    width="987"
    height="987"
    alt="My Awesome Image"
  />
</template>

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

Package Sidebar

Install

npm i @nuxtjs/cloudinary

Weekly Downloads

1,531

Version

2.6.0

License

MIT

Unpacked Size

41.3 kB

Total Files

19

Last publish

Collaborators

  • antfu
  • danielroe
  • clarkdo
  • pi0
  • atinux
  • alexchopin
  • baroshem
  • mayashavin