nuxt-modules / cloudinary

Cloudinary Module for Nuxt

@nuxtjs/cloudinary

Cloudinary integration with for Nuxt

• 📖  Documentation
• 👾  Playground

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

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

export default defineNuxtConfig({
  modules: ['@nuxtjs/cloudinary'],
})

See module options for more configuration options.

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