Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chore/3.0.0 #198

Closed
wants to merge 12 commits into from
30 changes: 29 additions & 1 deletion docs/content/1.getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_CLOUD_NAME>
```

::callout{icon="i-heroicons-check-circle"}
And that's it! You can now use Clodinary in Nuxt ✨
And that's it! You can now use Cloudinary in Nuxt ✨
::

```vue
Expand All @@ -62,6 +62,10 @@ Configure Nuxt Cloudinary easily with the `cloudinary` property.
export default {
cloudinary: {
cloudName: 'fesfese4324',
uploadPreset?: string,
apiKey?: string,
analytics?: true,
config?: CloudinaryConfigurationOptions,
}
}
```
Expand All @@ -72,6 +76,30 @@ export default {

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.

### `config`

- Default: `process.env.CLOUDINARY_CLOUD_NAME`

Cloudinary URL Loader configuration that will be passed to `useCldImageUrl` composable.

## 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.
Expand Down
2 changes: 1 addition & 1 deletion docs/content/2.components/CldImage/1.usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ description:
---


The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations.
The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations. It will inherit all global configuration via the `config` property.

Under the hood, this CldImage uses [Unpic](https://unpic.pics/) for delivering optimized images. Check out the documentation of Unpic for all available props and options like priority, loading, sizes, and more!

Expand Down
7 changes: 5 additions & 2 deletions docs/content/2.components/CldImage/2.configuration.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description:
description:
---

The CldImage component provides a wide range of options for being able to easily optimize and transform images.
Expand Down Expand Up @@ -27,10 +27,13 @@ The CldImage component exposes many of Cloudinary's transformations in an easy-t

| Prop | Type | Default | Example | More |
| --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ |
| angle | number | `-` | `45` | [Link](https://cloudinary.com/documentation/transformation_reference#a_angle) |
| crop | string | `"limit"` | `"thumb"` | [Link](https://cloudinary.com/documentation/transformation_reference#c_crop_resize) |
| background | string | `-` | `"blue"` | [Link](https://cloudinary.com/documentation/transformation_reference#b_background) |
| fillBackground (Beta) | `boolean/object` | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) |
| enhance | boolean | `-` | `{{ gravity: 'east' }}` | [Link](https://cloudinary.com/documentation/transformation_reference#b_gen_fill) |
| fillBackground (Beta) | `boolean/object` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_enhance) |
| gravity | string | `auto` | `"faces"` | [Link](https://cloudinary.com/documentation/transformation_reference#g_gravity) |
| loop | `boolean/number` | `-` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_loop) |
| recolor | `array/object` | `-` | `['duck', 'blue']` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_recolor) |
| remove | `string/array/object` | `-` | `apple` | [Link](https://cloudinary.com/documentation/transformation_reference#e_gen_remove) |
| removeBackground | `boolean/string` | `false` | `true` | [Link](https://cloudinary.com/documentation/transformation_reference#e_background_removal) |
Expand Down
Loading
Loading