Skip to content

Commit be42325

Browse files
patrick-tolosapatrick-tolosa
authored
Add readme information for Vue3 (#98)
* Add readme information for Vue3
1 parent cd10b14 commit be42325

1 file changed

Lines changed: 94 additions & 94 deletions

File tree

‎README.md‎

Lines changed: 94 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,100 +2,100 @@
22

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

5-
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.
6-
7-
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.
8-
9-
_This Readme provides basic installation and usage information. For the complete documentation, see the [Vue.js SDK guide](https://cloudinary.com/documentation/vue_integration)_
10-
11-
## 🛠️ How to install
12-
13-
**🎉We now support installing via Vue CLI 3.0 🎉**
14-
15-
### Install with Vue-CLI
16-
17-
1. After create your application with Vue-CLI, navigate to the created app folder, and install Cloudinary SDK by:
18-
19-
```bash
20-
vue add cloudinary
21-
```
22-
23-
2. Set up your cloudName and pick the components to use (or use all 😃)
24-
25-
![Set up with cloudName and options](http://bit.ly/2WSKTf0)
26-
27-
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! 🤟
28-
29-
More information on the plugin, check out [our Vue-CLI plugin for Cloudinary Repo](https://github.com/cloudinary/vue-cli-plugin-cloudinary)
30-
31-
## Manual install with `npm` or `yarn`
32-
33-
Install the package in your project with
34-
35-
```bash
36-
npm install cloudinary-vue
37-
38-
#OR
39-
40-
yarn add cloudinary-vue
41-
```
42-
43-
## 💻 Configure
44-
45-
### Configure Cloudinary options
46-
47-
1. In your `main.js` file (or the main entrance file of your application)
48-
49-
```jsx
50-
import Vue from "vue";
51-
import Cloudinary from "cloudinary-vue";
52-
```
53-
54-
2. You can setup Vue to use Cloudinary plugin without any configuration as below
55-
56-
```jsx
57-
Vue.use(Cloudinary);
58-
```
59-
60-
**Or** setup with some global Cloundinary configurations, such as `cloudName`
61-
62-
```jsx
63-
Vue.use(Cloudinary, {
64-
configuration: { cloudName: "demo" }
65-
// ^ cloudinary configuration options
66-
});
67-
```
68-
69-
3. Globally you can also select and register which Cloudinary components you'd like to use in your app in an **array of components**:
70-
71-
```jsx
72-
import Cloudinary, { CldImage } from "cloudinary-vue";
73-
74-
// specify which components to install in an array
75-
Vue.use(Cloudinary, {
76-
configuration: { cloudName: "demo" },
77-
components: [ CldImage ]
78-
});
79-
```
80-
81-
**Or** define them in **object of components**, and rename any component if needed.
82-
83-
```jsx
84-
import Cloudinary, { CldImage, CldTransformation } from "cloudinary-vue";
85-
86-
Vue.use(Cloudinary, {
87-
configuration: { cloudName: "demo" },
88-
components: {
89-
CldImage,
90-
CldXf: CldTransformation
91-
//^ a custom name
92-
}
93-
});
94-
```
95-
96-
**Notes**: By default, if there is no `components` defined, the plugin will _automatically_ install all available Cloudinary components.
97-
98-
### General usage
5+
Cloudinary is a [cloud-based service](https://cloudinary.com/solutions) that provides an end-to-end image and video management solution
6+
including uploads,storage, manipulations, optimizations and delivery.
7+
All your media resources are optimized and delivered through a fast CDN using industry best practices.
8+
9+
Using Cloudinary's Vue.js SDK, you can easily perform smart image and video manipulations
10+
using code that integrates seamlessly with your existing Vue.js application, and deliver optimized and responsive media to your users.
11+
12+
This Readme provides basic installation and usage information. For the complete documentation, see the [Vue.js SDK guide](https://cloudinary.com/documentation/vue_integration)_
13+
14+
# 🛠️ Installation
15+
## Vue 3.x
16+
17+
1. install using your favorite package manager (yarn, npm)
18+
```bash
19+
npm install cloudinary-vue
20+
yarn add cloudinary-vue
21+
```
22+
23+
## Vue 2.x
24+
1. Install using Vue-CLI
25+
- After you create your application with Vue-CLI, navigate to the created app folder, and install Cloudinary SDK by:
26+
```bash
27+
vue add cloudinary
28+
```
29+
- Set up your cloudName and pick the components to use (or use all 😃)
30+
![Set up with cloudName and options](http://bit.ly/2WSKTf0)
31+
- 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! 🤟
32+
- More information on the plugin, check out [our Vue-CLI plugin for Cloudinary Repo](https://github.com/cloudinary/vue-cli-plugin-cloudinary)
33+
34+
2. install using your favorite package manager (yarn, npm)
35+
```bash
36+
npm install cloudinary-vue
37+
yarn add cloudinary-vue
38+
```
39+
40+
41+
# Setup and configuration
42+
## Vue 3.x - Setup and configuration
43+
1. **A Global setup** - Include CloudinaryVue globally
44+
- **Globally as a plugin**:
45+
```javascript
46+
import { createApp } from 'vue';
47+
import App from './App.vue'; // Your app component
48+
import Cloudinary, {CldContext, CldImage, CldTransformation, CldVideo} from "cloudinary-vue";
49+
const app = createApp(App)
50+
51+
app.use(Cloudinary, {
52+
configuration: { cloudName: 'demo' }, // your cloud name
53+
components: {
54+
CldImage,
55+
CldTransformation
56+
}
57+
})
58+
59+
app.mount('#app');
60+
```
61+
**Notes**: By default, if `components` is not passed to the Cloudinary plugin, the plugin will _automatically_ install all available Cloudinary components.
62+
63+
2. **A Local setup** - You can also import the cloudinary components manually in each of your components.
64+
65+
## Vue 2.x - Setup and configuration
66+
1. **A Global setup** - Include CloudinaryVue globally
67+
```javascript
68+
import Vue from 'vue';
69+
import Cloudinary, { CldImage, CldTransformation } from "cloudinary-vue";
70+
71+
Vue.use(Cloudinary, {
72+
configuration: { cloudName: "demo" },
73+
components: {
74+
CldImage,
75+
CldTransformation
76+
}
77+
});
78+
```
79+
80+
2. **A Local setup** - You can also import the cloudinary components manually in each of your components.
81+
82+
83+
84+
# Plugin Configuration
85+
The CloudinaryVue Plugin accepts a **components** object with the Cloudinary components to install
86+
87+
- **components** can also be passed as an array:
88+
`components:[CldImage. CldTransformation]`
89+
90+
- `components` can also be used to rename the cloudinary components:
91+
```javascript
92+
components: {
93+
myImage: CldImage,
94+
myTransformation : CldTransformation
95+
}
96+
```
97+
98+
# General usage
9999
100100
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`).
101101

0 commit comments

Comments
 (0)