Skip to content

Commit 61ae6aa

Browse files
author
Nir Maoz
authored
Feat/remove vue3 video (#176)
1 parent d2431f9 commit 61ae6aa

15 files changed

Lines changed: 143 additions & 65 deletions

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"packages": [
3-
"packages/**/!(dist|playground|vue3)*"
3+
"packages/**/!(dist|playground)*"
44
],
55
"version": "1.4.2"
66
}

‎packages/html/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"repository": "https://github.com/cloudinary/frontend-frameworks",
1212
"scripts": {
1313
"build": "tsc && npm run prepare-build && rollup -c",
14+
"postbuild": "cp index.esm.* ./dist && cp index.umd.* ./dist",
1415
"prepare-build": "cp package.json ./dist"
1516
},
1617
"devDependencies": {

‎packages/vue3/.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎packages/vue3/README.md‎

Lines changed: 105 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,114 @@
1-
# vue3
1+
Cloudinary Vue 3 SDK
2+
=========================
3+
## About
4+
The Cloudinary Vue 3 SDK allows you to quickly and easily integrate your application with Cloudinary.
5+
Effortlessly optimize and transform your cloud's assets.
26

3-
## Project setup
4-
```
5-
npm install
6-
```
7+
#### Note
8+
This Readme provides basic installation and usage information.
79

8-
### Compiles and hot-reloads for development
9-
```
10-
npm run serve
11-
```
10+
## Table of Contents
11+
- [Key Features](#key-features)
12+
- [Version Support](#Version-Support)
13+
- [Installation](#installation)
14+
- [Usage](#usage)
15+
- [Setup](#Setup)
16+
- [Transform and Optimize Assets](#Transform-and-Optimize-Assets)
17+
- [Generate Image and HTML Tags](#Generate-Image-and-Video-HTML-Tags)
18+
- [Plugins](#Advanced-Plugin-Features)
1219

13-
### Compiles and minifies for production
14-
```
15-
npm run build
16-
```
20+
## Key Features
21+
- [Transform](https://cloudinary.com/documentation/react_video_manipulation#video_transformation_examples) and
22+
[optimize](https://cloudinary.com/documentation/react_image_manipulation#image_optimizations) assets.
23+
- Generate [image](https://cloudinary.com/documentation/react_image_manipulation#deliver_and_transform_images) and
24+
[video](https://cloudinary.com/documentation/react_video_manipulation#video_element) tags.
25+
26+
## Version Support
27+
| SDK Version | Vue 3.x |
28+
|---------------|---------|
29+
| 1.0.0 & up | V |
30+
31+
## Installation
32+
### Install using your favorite package manager (yarn, npm)
33+
```bash
34+
npm i @cloudinary/url-gen @cloudinary/vue3
1735

18-
### Run your unit tests
1936
```
20-
npm run test:unit
37+
Or
38+
```bash
39+
yarn add @cloudinary/url-gen @cloudinary/vue3
2140
```
2241

23-
### Lints and fixes files
24-
```
25-
npm run lint
42+
## Usage Example
43+
### Setup
44+
```vue
45+
<script type="module">
46+
import { AdvancedImage, responsive } from "@cloudinary/vue3"
47+
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
48+
49+
export default {
50+
components: {
51+
AdvancedImage
52+
},
53+
data() {
54+
return {
55+
plugins: [responsive({steps: 100})],
56+
cldImg: new CloudinaryImage(
57+
"sample",
58+
{cloudName: "demo"}
59+
)
60+
};
61+
}
62+
};
63+
</script>
64+
65+
<template>
66+
<div>
67+
<p>text</p>
68+
<AdvancedImage :cldImg="cldImg" :plugins="plugins" />
69+
</div>
70+
</template>```
71+
72+
### Generate Image elements
73+
- Use <AdvancedImage> to generate image tags
74+
75+
### Advanced Plugin Features
76+
- [See full documentation](https://cloudinary.com/documentation/react_integration#plugins)
77+
78+
We recommend the following order when using our plugins to achieve the best results:
79+
```js
80+
[lazyload(),responsive(), accessibility(), placeholder()]
2681
```
2782

28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).
83+
You can omit any plugin, but the order from above should remain.
84+
85+
### File upload
86+
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).
87+
88+
## Contributions
89+
- Ensure tests run locally (```npm run test```)
90+
- Open a PR and ensure Travis tests pass
91+
92+
## Get Help
93+
If you run into an issue or have a question, you can either:
94+
- [Open a Github issue](https://github.com/cloudinary/frontend-frameworks/issues) (for issues related to the SDK)
95+
- [Open a support ticket](https://cloudinary.com/contact) (for issues related to your account)
96+
97+
## About Cloudinary
98+
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.
99+
100+
101+
## Additional Resources
102+
- [Cloudinary Transformation and REST API References](https://cloudinary.com/documentation/cloudinary_references): Comprehensive references, including syntax and examples for all SDKs.
103+
- [MediaJams.dev](https://mediajams.dev/): Bite-size use-case tutorials written by and for Cloudinary Developers
104+
- [DevJams](https://www.youtube.com/playlist?list=PL8dVGjLA2oMr09amgERARsZyrOz_sPvqw): Cloudinary developer podcasts on YouTube.
105+
- [Cloudinary Academy](https://training.cloudinary.com/): Free self-paced courses, instructor-led virtual courses, and on-site courses.
106+
- [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.
107+
- [Cloudinary Roadmap](https://cloudinary.com/roadmap): Your chance to follow, vote, or suggest what Cloudinary should develop next.
108+
- [Cloudinary Facebook Community](https://www.facebook.com/groups/CloudinaryCommunity): Learn from and offer help to other Cloudinary developers.
109+
- [Cloudinary Account Registration](https://cloudinary.com/users/register/free): Free Cloudinary account registration.
110+
- [Cloudinary Website](https://cloudinary.com): Learn about Cloudinary's products, partners, customers, pricing, and more.
111+
112+
113+
## Licence
114+
Released under the MIT license.

‎packages/vue3/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{
22
"name": "@cloudinary/vue3",
3-
"version": "1.4.1",
3+
"version": "1.4.2",
44
"description": "Cloudinary Vue3 SDK",
55
"type": "module",
6+
"main": "index.js",
67
"scripts": {
78
"build": "rollup -c",
89
"prebuild": "rm -rf dist && npm run build --prefix ../html",
910
"postbuild": "replace-in-files --string='.vue' --replacement='' dist/index.d.ts && npm run copy:dts && npm run copy:pkg",
10-
"copy:dts": "cp dist/index.d.ts dist/index.esm.d.ts && cp dist/index.d.ts dist/index.ssr.d.ts",
11+
"copy:dts": "cp dist/index.d.ts dist/index.umd.d.ts && cp dist/index.d.ts dist/index.ssr.d.ts",
1112
"copy:pkg": "cp package.json ./dist",
1213
"prepublishOnly": "npm run build",
1314
"start": "vue-cli-service serve sampleApp/main.ts",
1415
"build:app": "vue-cli-service build",
1516
"test": "npm run test:dist && npm run test:src",
1617
"test:src": "vue-cli-service test:unit --coverage",
17-
"pretest:src": "replace-in-files --string='dist/index.esm' --replacement='src/index' tests/unit/*.spec.ts",
18+
"pretest:src": "replace-in-files --string='../../dist' --replacement='../../src' tests/unit/*.spec.ts",
1819
"test:dist": "npm run build && VUE3_TEST_ENV=DIST vue-cli-service test:unit",
19-
"pretest:dist": "replace-in-files --string='src/index' --replacement='dist/index.esm' tests/unit/*.spec.ts",
20+
"pretest:dist": "replace-in-files --string='../../src\"' --replacement='../../dist\"' tests/unit/*.spec.ts",
2021
"serve:coverage": "http-server coverage/lcov-report",
2122
"lint": "vue-cli-service lint"
2223
},

‎packages/vue3/rollup.config.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ export default [
1010
input: "src/index.ts",
1111
output: {
1212
format: "esm",
13-
file: "dist/index.esm.js",
13+
file: "dist/index.js",
14+
globals: {
15+
"@cloudinary/html": "CloudinaryHtml",
16+
vue: "Vue",
17+
},
1418
},
1519
plugins: [
1620
vue({ target: "browser" }),
@@ -36,6 +40,10 @@ export default [
3640
output: {
3741
format: "cjs",
3842
file: "dist/index.ssr.js",
43+
globals: {
44+
"@cloudinary/html": "CloudinaryHtml",
45+
vue: "Vue",
46+
},
3947
},
4048
plugins: [
4149
vue({ target: "node" }), // use 'node' to compile for SSR
@@ -59,8 +67,13 @@ export default [
5967
{
6068
input: "src/index.ts",
6169
output: {
62-
format: "iife",
63-
file: "dist/index.js",
70+
format: "umd",
71+
file: "dist/index.umd.js",
72+
name: "CloudinaryVue3SDK",
73+
globals: {
74+
"@cloudinary/html": "CloudinaryHtml",
75+
vue: "Vue",
76+
},
6477
},
6578
plugins: [
6679
vue({ target: "browser" }),

‎packages/vue3/sampleApp/App.vue‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,17 @@
22
<div>
33
<AdvancedImage :cldImg="cldImg" :plugins="plugins" />
44
</div>
5-
<div>
6-
<AdvancedVideo url="https://res.cloudinary.com/demo/video/upload/dog.mp4" />
7-
</div>
85
</template>
96

107
<script lang="ts">
118
import { defineComponent } from "vue";
12-
import {
13-
AdvancedImage,
14-
AdvancedVideo,
15-
accessibility,
16-
responsive,
17-
lazyload,
18-
placeholder,
19-
} from "../src";
9+
import { AdvancedImage, responsive } from "../dist";
2010
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
2111
2212
export default defineComponent({
2313
name: "App",
2414
components: {
2515
AdvancedImage,
26-
AdvancedVideo,
2716
},
2817
setup(props) {
2918
const cldImg = new CloudinaryImage(

‎packages/vue3/src/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Import and export all needed types
2+
* Import and export all needed components
33
*/
44
import {
55
placeholder,
@@ -9,13 +9,13 @@ import {
99
} from "@cloudinary/html";
1010

1111
import AdvancedImage from "./components/AdvancedImage.vue";
12-
import AdvancedVideo from "./components/AdvancedVideo.vue";
12+
// import AdvancedVideo from "./components/AdvancedVideo.vue";
1313

1414
export {
1515
placeholder,
1616
accessibility,
1717
lazyload,
1818
responsive,
1919
AdvancedImage,
20-
AdvancedVideo,
20+
// AdvancedVideo,
2121
};

‎packages/vue3/tests/unit/AdvancedImage.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from "@vue/test-utils";
2-
import { AdvancedImage } from "../../src/index";
2+
import { AdvancedImage } from "../../src";
33
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
44
import { waitTicks } from "./utils";
55

‎packages/vue3/tests/unit/AdvancedVideo.spec.ts‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)