Skip to content

Commit e2d04a3

Browse files
BaroshemBaroshem
authored
Merge pull request #200 from nuxt-modules/chore/2.7.0
chore/2.7.0
2 parents 8db8612 + f692759 commit e2d04a3

17 files changed

Lines changed: 293 additions & 113 deletions

File tree

‎.stackblitz/app.vue‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,46 @@
11
<script lang="ts" setup>
22
// Usage of `useCldImageUrl` composable
3-
const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
4-
console.log(url)
3+
const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
4+
console.log(url);
5+
6+
const { url: videoUrl } = useCldVideoUrl({
7+
options: { src: "videos/mountain-stars" },
8+
});
9+
console.log(videoUrl);
10+
11+
const mediaAssets = [
12+
{ tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
13+
{ tag: "electric_car_product_gallery_demo", mediaType: "video" },
14+
{ tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
15+
];
16+
17+
const buttonId = "open-btn";
518
</script>
619

720
<template>
821
<!-- Usage of `CldImage.vue` component -->
9-
<CldImage
10-
src="cld-sample-5"
11-
width="987"
12-
height="987"
13-
alt="Sample Product"
14-
/>
22+
<CldImage src="cld-sample-5" width="987" height="987" alt="Sample Product" />
1523
<CldVideoPlayer
1624
width="1620"
1725
height="1080"
1826
src="videos/mountain-stars"
27+
picture-in-picture-toggle
1928
/>
2029
<!-- Usage of `CldUploadWidget.vue` component -->
21-
<CldUploadWidget
22-
v-slot="{ open }"
23-
upload-preset="nuxt-cloudinary-unsigned"
24-
>
25-
<button
26-
type="button"
27-
@click="open"
28-
>
29-
Upload an Image
30-
</button>
30+
<CldUploadWidget v-slot="{ open }" upload-preset="nuxt-cloudinary-unsigned">
31+
<button type="button" @click="open">Upload an Image</button>
3132
</CldUploadWidget>
3233
<!-- Usage of `CldUploadButton.vue` component -->
33-
<CldUploadButton
34-
upload-preset="nuxt-cloudinary-unsigned"
35-
>
34+
<CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
3635
Upload
3736
</CldUploadButton>
3837
<p>CldOgImage is here. Inspect the html meta to see the result</p>
3938
<CldOgImage
4039
src="cld-sample-2"
4140
twitter-title="test"
41+
width="300"
42+
height="300"
43+
alt="test"
4244
/>
4345
<CldImage
4446
src="cld-sample-5"
@@ -49,7 +51,7 @@ console.log(url)
4951
{
5052
position: {
5153
gravity: 'north',
52-
y: 60
54+
y: 60,
5355
},
5456
text: {
5557
color: 'rgb:52a4ff80',
@@ -61,12 +63,12 @@ console.log(url)
6163
lineSpacing: -100,
6264
stroke: true,
6365
border: '20px_solid_rgb:2d0eff99',
64-
}
66+
},
6567
},
6668
{
6769
position: {
6870
gravity: 'south',
69-
y: 60
71+
y: 60,
7072
},
7173
text: {
7274
color: 'rgb:52a4ff80',
@@ -78,8 +80,20 @@ console.log(url)
7880
lineSpacing: -100,
7981
stroke: true,
8082
border: '20px_solid_rgb:2d0eff99',
81-
}
82-
}
83+
},
84+
},
8385
]"
8486
/>
87+
88+
<button :id="buttonId">Select Image or Video</button>
89+
<CldMediaLibrary
90+
api-key="12345"
91+
:button-id="buttonId"
92+
style="height: 600px"
93+
/>
94+
<CldProductGallery
95+
:media-assets="mediaAssets"
96+
cloud-name="demo"
97+
:button-id="buttonId"
98+
/>
8599
</template>

‎.stackblitz/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
"nuxt": "^3.8.0"
1212
},
1313
"dependencies": {
14-
"@nuxtjs/cloudinary": "^2.6.0"
14+
"@nuxtjs/cloudinary": "^2.7.2"
1515
}
1616
}

‎.stackblitz/yarn.lock‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -484,10 +484,15 @@
484484
dependencies:
485485
mime "^3.0.0"
486486

487-
"@cloudinary-util/url-loader@^4.2.0":
488-
version "4.2.0"
489-
resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-4.2.0.tgz#8d686666b5214db1daefd392a115e8a708f968d7"
490-
integrity sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA==
487+
"@cloudinary-util/types@1.0.1":
488+
version "1.0.1"
489+
resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.1.tgz#1bbfc0cffaf5d543e13f9dd4864a9aebc6496394"
490+
integrity sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==
491+
492+
"@cloudinary-util/url-loader@^5.2.1":
493+
version "5.2.1"
494+
resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.2.1.tgz#d663520b1dbf924d5d319dfc7819f27e4c5acb22"
495+
integrity sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ==
491496
dependencies:
492497
"@cloudinary-util/util" "3.0.0"
493498
"@cloudinary/url-gen" "1.15.0"
@@ -1168,12 +1173,13 @@
11681173
vite-plugin-checker "^0.6.2"
11691174
vue-bundle-renderer "^2.0.0"
11701175

1171-
"@nuxtjs/cloudinary@^2.6.0":
1172-
version "2.6.0"
1173-
resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.6.0.tgz#ab27227e6877bef97ff1f3e7b34947f0e9942034"
1174-
integrity sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA==
1176+
"@nuxtjs/cloudinary@^2.7.2":
1177+
version "2.7.2"
1178+
resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.7.2.tgz#74110eee3b7e4de159ae81baafa1437cfc5d2a6f"
1179+
integrity sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA==
11751180
dependencies:
1176-
"@cloudinary-util/url-loader" "^4.2.0"
1181+
"@cloudinary-util/types" "1.0.1"
1182+
"@cloudinary-util/url-loader" "^5.2.1"
11771183
"@nuxt/kit" "^3.5.0"
11781184
"@unpic/vue" "^0.0.42"
11791185
defu "^6.1.2"

‎docs/content/1.getting-started.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ Configure Nuxt Cloudinary easily with the `cloudinary` property.
6262
export default {
6363
cloudinary: {
6464
cloudName: 'fesfese4324',
65+
uploadPreset?: 'my-custom-preset',
66+
apiKey?: '12345',
67+
analytics?: true,
68+
cloud?: {},
69+
url?: {},
6570
}
6671
}
6772
```
@@ -72,6 +77,36 @@ export default {
7277

7378
Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard.
7479

80+
### `uploadPreset`
81+
82+
- Default: `-`
83+
84+
For example: `my-upload-preset`. Used with `CldUploadWidget` and `CldUploadButton` components
85+
86+
### `apiKey`
87+
88+
- Default: `-`
89+
90+
For example: `12345`. Used with `CldMediaLibrary` component.
91+
92+
### `analytics`
93+
94+
- Default: `true`
95+
96+
Enabling Cloudinary analytics.
97+
98+
### `cloud`
99+
100+
- Default: `-`
101+
102+
Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)
103+
104+
### `url`
105+
106+
- Default: `-`
107+
108+
Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)
109+
75110
## NuxtCloudinary vs Nuxt Image
76111

77112
You may be wondering what is the reason to have both Nuxt Cloudinary and Nuxt Image modules if they both have integration with Cloudinary and they tackle the aspect of optimized images.

0 commit comments

Comments
 (0)