Skip to content

Commit efb5095

Browse files
authored
Merge pull request #188 from cloudinary/chore/rename-vue-package
Rename @cloudinary/vue3 to @cloudinary/vue
2 parents 6e6272a + 66652c8 commit efb5095

31 files changed

+147
-136
lines changed

e2e-tests/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
"prepare:react": "npm run pack:react-sdk && npm run cpy-react-sdk && npm run build:react-test-app && npm run serve:react-test-app",
1313
"setChromeDriverVersion": "./scripts/setChromeDriverVersion.sh",
1414
"start-server-and-test:react": "WAIT_ON_TIMEOUT=600000 start-server-and-test prepare:react http://127.0.0.1:8000 test",
15-
"pack:vue-sdk": "cd ../frameworks/vue/vue3 && npm run build && npm pack",
16-
"cpy-vue-sdk": "cpy ../frameworks/vue/vue3/cloudinary-vue-*.tgz ./vue3-test-app --rename=cloudinary-vue.tgz",
17-
"build:vue-test-app": "cd vue3-test-app && npm run clean-install && npm run build",
18-
"serve:vue-test-app": "ws --directory vue3-test-app/dist",
15+
"pack:vue-sdk": "cd ../frameworks/vue && npm run build && npm pack",
16+
"cpy-vue-sdk": "cpy ../frameworks/vue/cloudinary-vue-*.tgz ./vue-test-app --rename=cloudinary-vue.tgz",
17+
"build:vue-test-app": "cd vue-test-app && npm run clean-install && npm run build",
18+
"serve:vue-test-app": "ws --directory vue-test-app/dist",
1919
"prepare:vue": "npm run pack:vue-sdk && npm run cpy-vue-sdk && npm run build:vue-test-app && npm run serve:vue-test-app",
2020
"start-server-and-test:vue": "WAIT_ON_TIMEOUT=600000 start-server-and-test prepare:vue http://127.0.0.1:8000 test"
2121
},

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"test": "lerna run test",
99
"build:docs": "node ./scripts/buildDocs.js",
1010
"start:docs": "live-server --open=public/docs",
11-
"update:urlgen": "npm install @cloudinary/url-gen@latest --prefix packages/html && npm install @cloudinary/url-gen@latest --prefix packages/react && npm install @cloudinary/url-gen@latest --prefix packages/vue3 && npm install @cloudinary/url-gen@latest --prefix packages/angular && npm install @cloudinary/url-gen@latest --prefix packages/angular/projects/cloudinary-library"
11+
"update:urlgen": "npm install @cloudinary/url-gen@latest --prefix packages/html && npm install @cloudinary/url-gen@latest --prefix packages/react && npm install @cloudinary/url-gen@latest --prefix packages/vue && npm install @cloudinary/url-gen@latest --prefix packages/angular && npm install @cloudinary/url-gen@latest --prefix packages/angular/projects/cloudinary-library"
1212
},
1313
"dependencies": {
1414
"better-docs": "2.3.2",
File renamed without changes.
File renamed without changes.
File renamed without changes.

packages/vue/README.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
Cloudinary Vue SDK
2+
=========================
3+
## About
4+
The Cloudinary Vue SDK allows you to quickly and easily integrate your application with Cloudinary.
5+
Effortlessly optimize and transform your cloud's assets.
6+
7+
#### Note
8+
This Readme provides basic installation and usage information.
9+
10+
## Table of Contents
11+
- [Cloudinary Vue 3 SDK](#cloudinary-vue-3-sdk)
12+
- [About](#about)
13+
- [Note](#note)
14+
- [Table of Contents](#table-of-contents)
15+
- [Key Features](#key-features)
16+
- [Version Support](#version-support)
17+
- [Installation](#installation)
18+
- [Install using your favorite package manager (yarn, npm)](#install-using-your-favorite-package-manager-yarn-npm)
19+
- [Usage Example](#usage-example)
20+
- [Setup](#setup)
21+
- [Generate Image elements](#generate-image-elements)
22+
- [Advanced Plugin Features](#advanced-plugin-features)
23+
- [File upload](#file-upload)
24+
- [Contributions](#contributions)
25+
- [Get Help](#get-help)
26+
- [About Cloudinary](#about-cloudinary)
27+
- [Additional Resources](#additional-resources)
28+
- [License](#license)
29+
30+
## Key Features
31+
- [Transform](https://cloudinary.com/documentation/react_video_manipulation#video_transformation_examples) and
32+
[optimize](https://cloudinary.com/documentation/react_image_manipulation#image_optimizations) assets.
33+
- Generate [image](https://cloudinary.com/documentation/react_image_manipulation#deliver_and_transform_images) and
34+
[video](https://cloudinary.com/documentation/react_video_manipulation#video_element) tags.
35+
36+
## Version Support
37+
| SDK Version | Vue 3.x |
38+
|---------------|---------|
39+
| 1.0.0 & up | V |
40+
41+
## Installation
42+
### Install using your favorite package manager (yarn, npm)
43+
```bash
44+
npm i @cloudinary/url-gen @cloudinary/vue
45+
46+
```
47+
Or
48+
```bash
49+
yarn add @cloudinary/url-gen @cloudinary/vue
50+
```
51+
52+
## Usage Example
53+
### Setup
54+
```vue
55+
<script type="module">
56+
import { AdvancedImage, responsive } from "@cloudinary/vue"
57+
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
58+
59+
export default {
60+
components: {
61+
AdvancedImage
62+
},
63+
data() {
64+
return {
65+
plugins: [responsive({steps: 100})],
66+
cldImg: new CloudinaryImage(
67+
"sample",
68+
{cloudName: "demo"}
69+
)
70+
};
71+
}
72+
};
73+
</script>
74+
75+
<template>
76+
<div>
77+
<p>text</p>
78+
<AdvancedImage :cldImg="cldImg" :plugins="plugins" />
79+
</div>
80+
</template>
81+
```
82+
83+
### Generate Image elements
84+
- Use <AdvancedImage> to generate image tags
85+
86+
### Advanced Plugin Features
87+
- [See full documentation](https://cloudinary.com/documentation/react_integration#plugins)
88+
89+
We recommend the following order when using our plugins to achieve the best results:
90+
```js
91+
[lazyload(), responsive(), accessibility(), placeholder()]
92+
```
93+
94+
You can omit any plugin, but the order from above should remain.
95+
96+
### File upload
97+
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).
98+
99+
## Contributions
100+
- Ensure tests run locally (```npm run test```)
101+
- Open a PR and ensure Travis tests pass
102+
103+
## Get Help
104+
If you run into an issue or have a question, you can either:
105+
- [Open a Github issue](https://github.com/cloudinary/frontend-frameworks/issues) (for issues related to the SDK)
106+
- [Open a support ticket](https://cloudinary.com/contact) (for issues related to your account)
107+
108+
## About Cloudinary
109+
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.
110+
111+
112+
## Additional Resources
113+
- [Cloudinary Transformation and REST API References](https://cloudinary.com/documentation/cloudinary_references): Comprehensive references, including syntax and examples for all SDKs.
114+
- [MediaJams.dev](https://mediajams.dev/): Bite-size use-case tutorials written by and for Cloudinary Developers
115+
- [DevJams](https://www.youtube.com/playlist?list=PL8dVGjLA2oMr09amgERARsZyrOz_sPvqw): Cloudinary developer podcasts on YouTube.
116+
- [Cloudinary Academy](https://training.cloudinary.com/): Free self-paced courses, instructor-led virtual courses, and on-site courses.
117+
- [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.
118+
- [Cloudinary Roadmap](https://cloudinary.com/roadmap): Your chance to follow, vote, or suggest what Cloudinary should develop next.
119+
- [Cloudinary Facebook Community](https://www.facebook.com/groups/CloudinaryCommunity): Learn from and offer help to other Cloudinary developers.
120+
- [Cloudinary Account Registration](https://cloudinary.com/users/register/free): Free Cloudinary account registration.
121+
- [Cloudinary Website](https://cloudinary.com): Learn about Cloudinary's products, partners, customers, pricing, and more.
122+
123+
124+
## License
125+
Released under the MIT license.
File renamed without changes.

packages/vue3/package.json renamed to packages/vue/package.json

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
{
2-
"name": "@cloudinary/vue3",
2+
"name": "@cloudinary/vue",
33
"version": "1.6.0",
4-
"description": "Cloudinary Vue3 SDK",
4+
"description": "Cloudinary Vue SDK",
5+
"author": "cloudinary",
6+
"license": "MIT",
57
"type": "module",
68
"main": "index.js",
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/cloudinary/frontend-frameworks.git",
12+
"directory": "packages/vue"
13+
},
714
"scripts": {
815
"build": "rollup -c",
916
"prebuild": "rm -rf dist && npm run build --prefix ../html",
@@ -16,7 +23,7 @@
1623
"test": "npm run test:dist && npm run test:src",
1724
"test:src": "vue-cli-service test:unit --coverage",
1825
"pretest:src": "replace-in-files --string='../../dist' --replacement='../../src' tests/unit/*.spec.ts",
19-
"test:dist": "npm run build && VUE3_TEST_ENV=DIST vue-cli-service test:unit",
26+
"test:dist": "npm run build && VUE_TEST_ENV_TEST_ENV=DIST vue-cli-service test:unit",
2027
"pretest:dist": "replace-in-files --string='../../src\"' --replacement='../../dist\"' tests/unit/*.spec.ts",
2128
"serve:coverage": "http-server coverage/lcov-report",
2229
"lint": "vue-cli-service lint"
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)