Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Update readme #154

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

Merged
merged 34 commits into from
Jan 23, 2022
Merged
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
6e64cd8
Update readme
patrick-tolosa Jan 18, 2022
b9c05d0
Add a link
patrick-tolosa Jan 18, 2022
fc860e9
Add missing links
patrick-tolosa Jan 18, 2022
30deaa4
Fix typo
patrick-tolosa Jan 18, 2022
d7b106f
Update README.md
patrick-tolosa Jan 19, 2022
9d7f169
Update README.md
patrick-tolosa Jan 19, 2022
cc57bdc
Update README.md
patrick-tolosa Jan 19, 2022
71cb3b2
Update README.md
patrick-tolosa Jan 19, 2022
3e69a12
Update README.md
patrick-tolosa Jan 19, 2022
4f36c13
Update README.md
patrick-tolosa Jan 19, 2022
b9f2c27
Update README.md
patrick-tolosa Jan 19, 2022
52f3906
Update README.md
patrick-tolosa Jan 19, 2022
2785af0
Update README.md
patrick-tolosa Jan 19, 2022
45cb150
Update README.md
patrick-tolosa Jan 19, 2022
c08b075
Update README.md
patrick-tolosa Jan 19, 2022
9060e81
Update the setup
patrick-tolosa Jan 19, 2022
3a13383
Update README.md
patrick-tolosa Jan 19, 2022
29e3b4c
Update README.md
patrick-tolosa Jan 19, 2022
84c0a6b
Update README.md
patrick-tolosa Jan 19, 2022
e69ff5b
Update README.md
patrick-tolosa Jan 19, 2022
93645ab
Update README.md
patrick-tolosa Jan 19, 2022
978b6bd
Update README.md
patrick-tolosa Jan 19, 2022
5f9313e
Update README.md
patrick-tolosa Jan 19, 2022
ee5a8a5
Update README.md
patrick-tolosa Jan 19, 2022
74732a2
Update README.md
patrick-tolosa Jan 19, 2022
c8994a2
Update README.md
patrick-tolosa Jan 19, 2022
cb028df
Update README.md
patrick-tolosa Jan 19, 2022
1363f4d
Update README.md
patrick-tolosa Jan 19, 2022
5931377
Update README.md
patrick-tolosa Jan 19, 2022
163fbf6
Update README.md
patrick-tolosa Jan 19, 2022
1eb6b30
Update README.md
patrick-tolosa Jan 19, 2022
02a85ef
Update README.md
patrick-tolosa Jan 19, 2022
06c0648
Update README.md
patrick-tolosa Jan 19, 2022
8aa1923
Update travis links
patrick-tolosa Jan 19, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
245 changes: 103 additions & 142 deletions 245 README.md
Original file line number Diff line number Diff line change
@@ -1,173 +1,134 @@
# Cloudinary Vue SDK
Cloudinary Vue SDK
=========================
[![Build Status](https://api.travis-ci.com/cloudinary/cloudinary-vue.svg?branch=master)](https://app.travis-ci.com/github/cloudinary/cloudinary-vue)
## About
The Cloudinary Vue SDK allows you to quickly and easily integrate your application with Cloudinary.
Effortlessly optimize and transform your cloud's assets.
patrick-tolosa marked this conversation as resolved.
Show resolved Hide resolved

[![Build Status](https://travis-ci.org/cloudinary/cloudinary-vue.svg?branch=master)](https://travis-ci.org/cloudinary/cloudinary-vue)

Cloudinary is a [cloud-based service](https://cloudinary.com/solutions) that provides an end-to-end image and video management solution
including uploads,storage, manipulations, optimizations and delivery.
All your media resources are optimized and delivered through a fast CDN using industry best practices.
### Additional documentation
This Readme provides basic installation and usage information.
For the complete documentation, see the [Vue SDK Guide](https://cloudinary.com/documentation/vue_integration).

Using Cloudinary's Vue.js SDK, you can easily perform smart image and video manipulations
using code that integrates seamlessly with your existing Vue.js application, and deliver optimized and responsive media to your users.

This Readme provides basic installation and usage information. For the complete documentation, see the [Vue.js SDK guide](https://cloudinary.com/documentation/vue_integration)_
## Table of Contents
- [Key Features](#key-features)
- [Version Support](#Version-Support)
- [Installation](#installation)
- [Usage](#usage)
- [Setup](#Setup)
- [Transform and Optimize Assets](#Transform-and-Optimize-Assets)
- [Generate Image and HTML Tags](#Generate-Image-and-Video-HTML-Tags)

# 🛠️ Installation
## Vue 2.x
1. Install using Vue-CLI
- After you create your application with Vue-CLI, navigate to the created app folder, and install Cloudinary SDK by:
```bash
vue add cloudinary
```
- Set up your cloudName and pick the components to use (or use all 😃)
![Set up with cloudName and options](http://bit.ly/2WSKTf0)
- A `cloudinary.js` file will be added to your src directory, same level with your `main.js` file. Feel free to customize it if you like. And have fun with Cloudinary! 🤟
- More information on the plugin, check out [our Vue-CLI plugin for Cloudinary Repo](https://github.com/cloudinary/vue-cli-plugin-cloudinary)
## Key Features
- [Transform](https://cloudinary.com/documentation/vue_video_manipulation#video_transformation_examples) and [optimize](https://cloudinary.com/documentation/vue_image_manipulation#image_optimizations) assets (links to docs).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we drop the "(link to docs)" at the end?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can, but I added it because there are many links in this read me,
I wanted it to be clear that it's an external link and not hijack people away from the readme.

- Generate [image](https://cloudinary.com/documentation/vue_image_manipulation#deliver_and_transform_images) and [video](https://cloudinary.com/documentation/vue_video_manipulation#cldvideo_component) tags (links to docs).

2. install using your favorite package manager (yarn, npm)
```bash
npm install cloudinary-vue
yarn add cloudinary-vue
```

### Nuxt.js
## Version Support
| SDK Version | Vue 2 | Vue 3 |
|---------------|----------|--------|
| 1.0.0 - 1.2.3 | V | X |

Please use [Cloudinary module](https://cloudinary.nuxtjs.org/) for [Nuxt.js](https://nuxtjs.org) projects. You can set it up by using the following:


## Installation
### Install using Vue-CLI
- After you create your application with Vue-CLI, navigate to the created app folder, and install Cloudinary SDK by:
```bash
vue add cloudinary
```
- Set up your cloud name and pick the components to use (or use all 😃)
![Set up with cloudName and options](http://bit.ly/2WSKTf0)
patrick-tolosa marked this conversation as resolved.
Show resolved Hide resolved
- A `cloudinary.js` file will be added to your src directory, at the same level as your `main.js` file. Feel free to customize it if you like. And have fun with Cloudinary! 🤟
- For more information on the plugin, check out our [Vue-CLI plugin for Cloudinary Repo](https://github.com/cloudinary/vue-cli-plugin-cloudinary).

### Install using your favorite package manager (yarn, npm)
```bash
npm install cloudinary-vue
yarn add cloudinary-vue
```
### Nuxt.js
For [Nuxt.js](https://nuxtjs.org) projects, use [Cloudinary module](https://cloudinary.nuxtjs.org/). You can set it up by using the following:
```
yarn add @nuxtjs/cloudinary
#OR
# Or
npm i @nuxtjs/cloudinary
```

## Setup and configuration
## Usage
### Setup
```javascript
import Vue from 'vue';
import Cloudinary, { CldImage, CldVideo, CldTransformation, CldContext } from "cloudinary-vue";

Vue.use(Cloudinary, {
configuration: { cloudName: "demo" },
components: {
CldContext,
CldImage,
CldVideo,
CldTransformation,
}
});
```
You can also import the Cloudinary components manually in each of your components.

### Vue 2.x - Setup and configuration
1. **A Global setup** - Include CloudinaryVue globally
```javascript
import Vue from 'vue';
import Cloudinary, { CldImage, CldTransformation } from "cloudinary-vue";
### Transform and Optimize Assets
- [See full documentation](https://cloudinary.com/documentation/vue_image_manipulation)

Vue.use(Cloudinary, {
configuration: { cloudName: "demo" },
components: {
CldImage,
CldTransformation
}
});
```jsx
// Apply a single transformation
<cld-context cloudName="demo">
patrick-tolosa marked this conversation as resolved.
Show resolved Hide resolved
<cld-image publicId="sample">
<cld-transformation crop="scale" width="200" angle="10" />
</cld-image>
</cld-context>
```

2. **A Local setup** - You can also import the cloudinary components manually in each of your components.

# Plugin Configuration
The CloudinaryVue Plugin accepts a `components` object with the Cloudinary components to install

- `components` can also be passed as an array:
```javascript
components:[CldImage. CldTransformation]
```

- `components` can also be used to rename the cloudinary components:
```javascript
components: {
myImage: CldImage,
myTransformation : CldTransformation
}
```

# General usage

In order to properly use this library you have to provide it with a few configuration parameters. All configuration parameters can be applied directly to the element, using a `CldContext` component or while installing a plugin (second argument of `Vue.use`).

```html
<template>
<div>
<h1>Hello, world!</h1>

<cld-image cloudName="demo" publicId="sample" crop="scale" width="300" />

```jsx
// Chain (compose) multiple transformations
<cld-context cloudName="demo">
<cld-image publicId="sample">
<cld-transformation crop="scale" width="200" angle="10" />
</cld-image>
</cld-context>
</div>
</template>
```

Required:

- `cloudName` - The cloudinary cloud name associated with your Cloudinary account.

Optional:

- `privateCdn`, `secureDistribution`, `cname`, `cdnSubdomain` - Please refer to [Cloudinary Documentation](https://cloudinary.com/documentation/react_integration#3_set_cloudinary_configuration_parameters) for information on these parameters.

### Specific usage

The library includes 5 components:

- `CldContext`
- `CldTransformation`
- `CldImage`
- `CldVideo`
- `CldPoster` (only used together with `CldVideo`)

#### CldContext

`CldContext` allows you to define shared configuration and resource transformation parameters that are applied to all children elements.

#### CldImage

outputs HTML `img` tag with a correct `src` attribute for provided Cloudinary resource, based on configuration and transformation parameters provided as attributes of this component instance, parent `CldContext` and children `CldTransformation` instances.

#### CldVideo

outputs HTML `video` tag with a correct `sources` for provided Cloudinary resource, based on configuration and transformation parameters provided as attributes of this component instance, parent `CldContext` and children `CldTransformation` instances.

#### CldPoster (optional)
specify image resource to be provided to `poster` attribute of the `video` element

#### CldTransformation

The Transformation element allows you to defined additional transformations on the parent element. You can also use built-in `transformation` attribute available in `CldImage` and `CldVideo` for the same effect.

For example:

```jsx
<cld-image cloudName="demo" publicId="sample">
<cld-transformation angle="-45" />
<cld-transformation effect="trim" angle="45" crop="scale" width="600" />
<cld-transformation overlay="text:Arial_100:Hello" />
</cld-image>
```

## How to contribute?

See [contributing guidelines](/CONTRIBUTING.md) in a separate file.
<cld-image cloudName="demo" publicId="sample">
<cld-transformation angle="-45" />
<cld-transformation effect="trim" angle="45" crop="scale" width="600" />
<cld-transformation overlay="text:Arial_100:Hello" />
</cld-image>
</cld-context>
```
### Generate Image and Video HTML Tags
- Use <cld-image> to generate image tags
- Use <cld-video> to generate video Tags

## Additional resources
### File upload
This SDK does not provide file upload functionality, however there are [several methods of uploading from the client side](https://cloudinary.com/documentation/vue_image_and_video_upload).

Additional resources are available at:

- [Website](http://cloudinary.com)
- [Documentation](https://cloudinary.com/documentation/vue_integration)
- [Knowledge Base](http://support.cloudinary.com/forums)
- [Image transformations documentation](http://cloudinary.com/documentation/image_transformations)
- [Video transformations documentation](https://cloudinary.com/documentation/video_manipulation_and_delivery#video_transformations_reference)
- [Cli plugin for Cloudinary Vue](https://github.com/cloudinary/vue-cli-plugin-cloudinary)
## Contributions
See [contributing guidelines](/CONTRIBUTING.md).

## Support

You can [open an issue through GitHub](https://github.com/CloudinaryLtd/cloudinary_vue/issues).
## Get Help
If you run into an issue or have a question, you can either:
- [Open a Github issue](https://github.com/CloudinaryLtd/cloudinary_vue/issues) (for issues related to the SDK)
- [Open a support ticket](https://cloudinary.com/contact) (for issues related to your account)

Contact us at [http://cloudinary.com/contact](http://cloudinary.com/contact).

Stay tuned for updates, tips and tutorials: [Blog](http://cloudinary.com/blog), [Twitter](https://twitter.com/cloudinary), [Facebook](http://www.facebook.com/Cloudinary).
## About Cloudinary
Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device.

## Join the Community

Impact the product, hear updates, test drive new features and more! Join [here](https://www.facebook.com/groups/CloudinaryCommunity).
## Additional Resources
- [Cloudinary Transformation and REST API References](https://cloudinary.com/documentation/cloudinary_references): Comprehensive references, including syntax and examples for all SDKs.
- [MediaJams.dev](https://mediajams.dev/): Bite-size use-case tutorials written by and for Cloudinary Developers
- [DevJams](https://www.youtube.com/playlist?list=PL8dVGjLA2oMr09amgERARsZyrOz_sPvqw): Cloudinary developer podcasts on YouTube.
- [Cloudinary Academy](https://training.cloudinary.com/): Free self-paced courses, instructor-led virtual courses, and on-site courses.
- [Code Explorers and Feature Demos](https://cloudinary.com/documentation/code_explorers_demos_index): A one-stop shop for all code explorers, Postman collections, and feature demos found in the docs.
- [Cloudinary Roadmap](https://cloudinary.com/roadmap): Your chance to follow, vote, or suggest what Cloudinary should develop next.
- [Cloudinary Facebook Community](https://www.facebook.com/groups/CloudinaryCommunity): Learn from and offer help to other Cloudinary developers.
- [Cloudinary Account Registration](https://cloudinary.com/users/register/free): Free Cloudinary account registration.
- [Cloudinary Website](https://cloudinary.com)
patrick-tolosa marked this conversation as resolved.
Show resolved Hide resolved

## License

## Licence
Released under the MIT license.
Morty Proxy This is a proxified and sanitized view of the page, visit original site.