Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-modules/cloudinary
Cloudinary Module for Nuxt
https://github.com/nuxt-modules/cloudinary
cloudinary cloudinary-sdk hacktoberfest nuxt nuxt-cloudinary nuxt-module nuxt-modules nuxtjs nuxtjs-module vue vuejs
Last synced: 29 days ago
JSON representation
Cloudinary Module for Nuxt
- Host: GitHub
- URL: https://github.com/nuxt-modules/cloudinary
- Owner: nuxt-modules
- License: mit
- Created: 2020-08-04T08:37:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T09:09:04.000Z (3 months ago)
- Last Synced: 2024-09-30T02:29:18.783Z (about 1 month ago)
- Topics: cloudinary, cloudinary-sdk, hacktoberfest, nuxt, nuxt-cloudinary, nuxt-module, nuxt-modules, nuxtjs, nuxtjs-module, vue, vuejs
- Language: Vue
- Homepage: https://cloudinary.nuxtjs.org
- Size: 3.43 MB
- Stars: 249
- Watchers: 6
- Forks: 33
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://cloudinary.nuxtjs.org)
# @nuxtjs/cloudinary
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
> [Cloudinary](https://cloudinary.com) integration with for [Nuxt](https://nuxt.com)
- [📖  Documentation](https://cloudinary.nuxtjs.org)
- [👾  Playground](https://stackblitz.com/github/nuxt-modules/cloudinary?file=.stackblitz%2Fnuxt.config.ts)
> This is a module for version 3.X of Nuxt. If you are looking for Nuxt 2.X support check out the following [branch](https://github.com/nuxt-modules/cloudinary/tree/v1) and the legacy documentation [here](https://v1.cloudinary.nuxtjs.org)
## 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](https://cloudinary.nuxtjs.org)
## Quick Setup
1. Add `@nuxtjs/cloudinary` dependency to your project
```bash
yarn add @nuxtjs/cloudinary
npm install @nuxtjs/cloudinary
```
2. Add `@nuxtjs/cloudinary` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ['@nuxtjs/cloudinary'],
})
```
See [module options](https://cloudinary.nuxtjs.org/getting-started/options) for more configuration options.
3. Create .env file with following `CLOUDINARY_CLOUD_NAME` variable:
```bash
CLOUDINARY_CLOUD_NAME=
```
And that's it! You can now use Cloudinary in Nuxt ✨
```html
```
## 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](./LICENSE)
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/cloudinary/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/cloudinary
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/cloudinary.svg
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/cloudinary
[github-actions-ci-src]: https://github.com/nuxt-modules/cloudinary/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-modules/cloudinary/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-modules/cloudinary.svg
[codecov-href]: https://codecov.io/gh/nuxt-modules/cloudinary
[license-src]: https://img.shields.io/npm/l/@nuxtjs/cloudinary.svg
[license-href]: https://npmjs.com/package/@nuxtjs/cloudinary