From 95add993f9877f97af509bfe9331abad80030894 Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Fri, 22 Mar 2024 14:18:24 -0300 Subject: [PATCH 1/7] adding ability to pass in global module configurations --- playground/nuxt.config.ts | 8 +++++++- src/module.ts | 7 ++++++- src/runtime/composables/useCldImageUrl.ts | 21 ++++++++++++++++----- 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 08819ad..b798e20 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -1,6 +1,12 @@ export default defineNuxtConfig({ modules: ['../src/module'], cloudinary: { - cloudName: 'nuxt-cloudinary' + cloudName: 'nuxt-cloudinary', + url: { + cname: 'spacejelly.dev', + secureDistribution: 'spacejelly.dev', + secure: true, + privateCdn: true + } } }) diff --git a/src/module.ts b/src/module.ts index 3d6d4e5..377fca5 100644 --- a/src/module.ts +++ b/src/module.ts @@ -6,12 +6,15 @@ import { } from "@nuxt/kit"; import { fileURLToPath } from "url"; import { defu } from "defu"; +import { ConfigOptions } from '@cloudinary-util/url-loader' export type ModuleOptions = { cloudName?: string; uploadPreset?: string; apiKey?: string; analytics?: boolean; + cloud?: ConfigOptions["cloud"]; + url?: ConfigOptions["url"]; }; export default defineNuxtModule({ @@ -33,7 +36,9 @@ export default defineNuxtModule({ uploadPreset: process.env.CLOUDINARY_UPLOAD_PRESET || options.uploadPreset, apiKey: process.env.CLOUDINARY_API_KEY || options.apiKey, - analytics: options.analytics + analytics: options.analytics, + cloud: options.cloud, + url: options.url, } ); diff --git a/src/runtime/composables/useCldImageUrl.ts b/src/runtime/composables/useCldImageUrl.ts index d91b78c..fddafe4 100644 --- a/src/runtime/composables/useCldImageUrl.ts +++ b/src/runtime/composables/useCldImageUrl.ts @@ -6,7 +6,16 @@ import pkg from '../../../package.json' export const useCldImageUrl = (props: ConstructUrlProps) => { if (!props.options.src) console.error("`[@nuxtjs/cloudinary]`: Property `src` is missing") - const cldCloudName = props.config?.cloud?.cloudName || useRuntimeConfig().public.cloudinary.cloudName + const moduleConfig = useRuntimeConfig().public.cloudinary; + + // There are a few ways to pass in the Cloud Name + // - Component/composable config prop + // - Top level module config + // - Top level module config cloud property + // While the top level module config is redundant, retaining it for convenience as most + // users won't need to pass in more advanced settings via the `cloud` property + + const cldCloudName = props.config?.cloud?.cloudName || moduleConfig.cloud?.cloudName || moduleConfig?.cloudName; if (!cldCloudName) console.warn('`[@nuxtjs/cloudinary]` Environment variable `CLOUDINARY_CLOUD_NAME` or property `cloudinary.cloudName` missing') @@ -16,15 +25,17 @@ export const useCldImageUrl = (props: ConstructUrlProps) => { ...props.options }, config: { - ...props.config, + url: moduleConfig.url, cloud: { - cloudName: cldCloudName - } + cloudName: cldCloudName, + ...moduleConfig.cloud + }, + ...props.config, }, analytics: false } - if (useRuntimeConfig().public.cloudinary.analytics) { + if (moduleConfig.analytics) { cldOptions = { ...cldOptions, analytics: Object.assign({ From 8ad2df694ec8e3b5955663c51a889bd452ba9c68 Mon Sep 17 00:00:00 2001 From: Baroshem Date: Sun, 24 Mar 2024 19:24:47 +0100 Subject: [PATCH 2/7] feat-#197: useCldVideoUrl composable --- docs/content/1.getting-started.md | 35 ++++++++++++++ .../content/3.composables/2.useCldVideoUrl.md | 28 +++++++++++ playground/app.vue | 26 ++++------ playground/nuxt.config.ts | 8 +--- src/runtime/composables/useCldVideoUrl.ts | 47 +++++++++++++++++++ 5 files changed, 121 insertions(+), 23 deletions(-) create mode 100644 docs/content/3.composables/2.useCldVideoUrl.md create mode 100644 src/runtime/composables/useCldVideoUrl.ts diff --git a/docs/content/1.getting-started.md b/docs/content/1.getting-started.md index 3b3379d..88dba08 100644 --- a/docs/content/1.getting-started.md +++ b/docs/content/1.getting-started.md @@ -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?: {}, } } ``` @@ -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. diff --git a/docs/content/3.composables/2.useCldVideoUrl.md b/docs/content/3.composables/2.useCldVideoUrl.md new file mode 100644 index 0000000..5751c5a --- /dev/null +++ b/docs/content/3.composables/2.useCldVideoUrl.md @@ -0,0 +1,28 @@ +--- +description: +--- + +This composable is using [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) under the hood to generate the Cloudinary URL with certain optimizations. + +## Usage + +Configuration for `useCldVideoUrl` is the same as [useCldImageUrl](usecldimageurl). + +```vue + +``` + + The only difference is getCldVideoUrl provides the following default settings: + +| Option Name | Type | Default | +| ----------- | ------ | --------- | +| assetType | string | `"video"` | + +Additionally, the transformations do not have access to image-specific transformations. +Find more configuration settings over at [useCldImageUrl](usecldimageurl#configuration) configuration. diff --git a/playground/app.vue b/playground/app.vue index b89821b..e5a2f6c 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -3,6 +3,11 @@ 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" }, @@ -15,9 +20,7 @@ const cldVideoRef = ref();