Skip to content

1.getting-started.md

Latest commit

 

History

History
120 lines (79 loc) · 3.18 KB

1.getting-started.md

File metadata and controls

120 lines (79 loc) · 3.18 KB
title Getting Started
description ⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary.

Installation

  1. Add @nuxtjs/cloudinary dependency to your project:

::code-group

yarn add @nuxtjs/cloudinary
npm install @nuxtjs/cloudinary
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>

Don't have a Cloudinary account? Sign up for free on cloudinary.com!

::callout{icon="i-heroicons-check-circle"} 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>

:cld-image{src="images/sneakers" width="900" height="900" alt="test" style="text-align: center; margin: 0 auto"}

Options

Configure Nuxt Cloudinary easily with the cloudinary property.

export default {
  cloudinary: {
    cloudName: 'fesfese4324',
    uploadPreset?: 'my-custom-preset',
    apiKey?: '12345',
    analytics?: true,
    cloud?: {},
    url?: {},
  }
}

cloudName

  • Default: process.env.CLOUDINARY_CLOUD_NAME

Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard.

uploadPreset

  • Default: -

For example: my-upload-preset. Used with CldUploadWidget and CldUploadButton components

apiKey

  • Default: -

For example: 12345. Used with CldMediaLibrary component.

analytics

  • Default: true

Enabling Cloudinary analytics.

cloud

  • Default: -

Top level configuration used for all composables and components. Check out all available options here

url

  • Default: -

Top level configuration used for all composables and components. Check out all available options here

NuxtCloudinary vs Nuxt Image

You may be wondering what is the reason to have both Nuxt Cloudinary and Nuxt Image modules if they both have integration with Cloudinary and they tackle the aspect of optimized images.

This is a good question that should be answered by showing examples when one module is better than the other:

If you need just an optimized image/picture component with ability to connect to various providers (including Cloudinary) you may use Nuxt Image.

However, if you are looking for a solution that would allow you to use advanced AI powered image transformations, optimized videos, OG Images, and prebuilt components like ProductGallery, MediaLibrary, or UploadWidget, Nuxt Cloudinary will be a better solution for you.