Setup

⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary.

Installation

  1. Add @nuxtjs/cloudinary dependency to your project:
Yarn
yarn add @nuxtjs/cloudinary
NPM
npm install @nuxtjs/cloudinary
PNPM
pnpm add @nuxtjs/cloudinary
  1. Add it to your modules section in your nuxt.config:
export default defineNuxtConfig({
  modules: ["@nuxtjs/cloudinary"],
});
  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 Clodinary in Nuxt ✨
<template>
  <CldImage
    src="cld-sample-5"
    width="987"
    height="987"
    alt="My Awesome Image"
  />
</template>

See the module options for additional configuration.