Skip to content
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.

Sign up for GitHub

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

chore/2.7.0 #200

Merged
merged 7 commits into from
Mar 25, 2024
Merged

chore/2.7.0 #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
95add99
adding ability to pass in global module configurations
colbyfayock Mar 22, 2024
8ad2df6
feat-#197: useCldVideoUrl composable
Baroshem Mar 24, 2024
07832d6
feat: cldvideoplayer config
Baroshem Mar 24, 2024
a7a025e
feat: config
Baroshem Mar 25, 2024
aab0411
feat: picture-in-picture
Baroshem Mar 23, 2024
4765a9f
feat: pass module config
Baroshem Mar 25, 2024
f692759
chore/2.7.0
Baroshem Mar 25, 2024
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
66 changes: 40 additions & 26 deletions .stackblitz/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,46 @@
<script lang="ts" setup>
// Usage of `useCldImageUrl` composable
const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
console.log(url)
const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
console.log(url);

const { url: videoUrl } = useCldVideoUrl({
options: { src: "videos/mountain-stars" },
});
console.log(videoUrl);

const mediaAssets = [
{ tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
{ tag: "electric_car_product_gallery_demo", mediaType: "video" },
{ tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
];

const buttonId = "open-btn";
</script>

<template>
<!-- Usage of `CldImage.vue` component -->
<CldImage
src="cld-sample-5"
width="987"
height="987"
alt="Sample Product"
/>
<CldImage src="cld-sample-5" width="987" height="987" alt="Sample Product" />
<CldVideoPlayer
width="1620"
height="1080"
src="videos/mountain-stars"
picture-in-picture-toggle
/>
<!-- Usage of `CldUploadWidget.vue` component -->
<CldUploadWidget
v-slot="{ open }"
upload-preset="nuxt-cloudinary-unsigned"
>
<button
type="button"
@click="open"
>
Upload an Image
</button>
<CldUploadWidget v-slot="{ open }" upload-preset="nuxt-cloudinary-unsigned">
<button type="button" @click="open">Upload an Image</button>
</CldUploadWidget>
<!-- Usage of `CldUploadButton.vue` component -->
<CldUploadButton
upload-preset="nuxt-cloudinary-unsigned"
>
<CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
Upload
</CldUploadButton>
<p>CldOgImage is here. Inspect the html meta to see the result</p>
<CldOgImage
src="cld-sample-2"
twitter-title="test"
width="300"
height="300"
alt="test"
/>
<CldImage
src="cld-sample-5"
Expand All @@ -49,7 +51,7 @@ console.log(url)
{
position: {
gravity: 'north',
y: 60
y: 60,
},
text: {
color: 'rgb:52a4ff80',
Expand All @@ -61,12 +63,12 @@ console.log(url)
lineSpacing: -100,
stroke: true,
border: '20px_solid_rgb:2d0eff99',
}
},
},
{
position: {
gravity: 'south',
y: 60
y: 60,
},
text: {
color: 'rgb:52a4ff80',
Expand All @@ -78,8 +80,20 @@ console.log(url)
lineSpacing: -100,
stroke: true,
border: '20px_solid_rgb:2d0eff99',
}
}
},
},
]"
/>

<button :id="buttonId">Select Image or Video</button>
<CldMediaLibrary
api-key="12345"
:button-id="buttonId"
style="height: 600px"
/>
<CldProductGallery
:media-assets="mediaAssets"
cloud-name="demo"
:button-id="buttonId"
/>
</template>
2 changes: 1 addition & 1 deletion .stackblitz/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
"nuxt": "^3.8.0"
},
"dependencies": {
"@nuxtjs/cloudinary": "^2.6.0"
"@nuxtjs/cloudinary": "^2.7.2"
}
}
24 changes: 15 additions & 9 deletions .stackblitz/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,10 +484,15 @@
dependencies:
mime "^3.0.0"

"@cloudinary-util/url-loader@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-4.2.0.tgz#8d686666b5214db1daefd392a115e8a708f968d7"
integrity sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA==
"@cloudinary-util/types@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.1.tgz#1bbfc0cffaf5d543e13f9dd4864a9aebc6496394"
integrity sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==

"@cloudinary-util/url-loader@^5.2.1":
version "5.2.1"
resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.2.1.tgz#d663520b1dbf924d5d319dfc7819f27e4c5acb22"
integrity sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ==
dependencies:
"@cloudinary-util/util" "3.0.0"
"@cloudinary/url-gen" "1.15.0"
Expand Down Expand Up @@ -1168,12 +1173,13 @@
vite-plugin-checker "^0.6.2"
vue-bundle-renderer "^2.0.0"

"@nuxtjs/cloudinary@^2.6.0":
version "2.6.0"
resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.6.0.tgz#ab27227e6877bef97ff1f3e7b34947f0e9942034"
integrity sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA==
"@nuxtjs/cloudinary@^2.7.2":
version "2.7.2"
resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.7.2.tgz#74110eee3b7e4de159ae81baafa1437cfc5d2a6f"
integrity sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA==
dependencies:
"@cloudinary-util/url-loader" "^4.2.0"
"@cloudinary-util/types" "1.0.1"
"@cloudinary-util/url-loader" "^5.2.1"
"@nuxt/kit" "^3.5.0"
"@unpic/vue" "^0.0.42"
defu "^6.1.2"
Expand Down
35 changes: 35 additions & 0 deletions docs/content/1.getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,11 @@ Configure Nuxt Cloudinary easily with the `cloudinary` property.
export default {
cloudinary: {
cloudName: 'fesfese4324',
uploadPreset?: 'my-custom-preset',
apiKey?: '12345',
analytics?: true,
cloud?: {},
url?: {},
}
}
```
Expand All @@ -72,6 +77,36 @@ export default {

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

### `uploadPreset`

- Default: `-`

For example: `my-upload-preset`. Used with `CldUploadWidget` and `CldUploadButton` components

### `apiKey`

- Default: `-`

For example: `12345`. Used with `CldMediaLibrary` component.

### `analytics`

- Default: `true`

Enabling Cloudinary analytics.

### `cloud`

- Default: `-`

Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)

### `url`

- Default: `-`

Top level configuration used for all composables and components. Check out all available options [here](https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters)

## NuxtCloudinary vs Nuxt Image

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.
Expand Down
Loading
Loading