From ffda918f54d0c9a38316d77812d19a791bc6b59c Mon Sep 17 00:00:00 2001 From: Thorsten Kober Date: Sat, 3 Feb 2024 18:04:46 -0500 Subject: [PATCH] docs: add remaining third-party-capital api docs (#25592) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Houssein Djirdeh Co-authored-by: Julien Huang Co-authored-by: Damian Głowala --- docs/3.api/1.components/12.google-maps.md | 64 +++++++++++++++++++ docs/3.api/1.components/13.youtube-embed.md | 39 +++++++++++ .../2.composables/use-google-analytics.md | 50 +++++++-------- .../2.composables/use-google-tag-manager.md | 60 +++++++++++++++++ 4 files changed, 188 insertions(+), 25 deletions(-) create mode 100644 docs/3.api/1.components/12.google-maps.md create mode 100644 docs/3.api/1.components/13.youtube-embed.md create mode 100644 docs/3.api/2.composables/use-google-tag-manager.md diff --git a/docs/3.api/1.components/12.google-maps.md b/docs/3.api/1.components/12.google-maps.md new file mode 100644 index 0000000000..715c27ec1b --- /dev/null +++ b/docs/3.api/1.components/12.google-maps.md @@ -0,0 +1,64 @@ +--- +title: "" +description: A simple and performant Google Maps component. +links: + - label: Source + icon: i-simple-icons-github + to: https://github.com/nuxt/scripts-and-assets/blob/main/modules/nuxt-third-party-capital/src/runtime/components/GoogleMaps.ts + size: xs +--- + +The `` component uses the [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript) to load a map to your page. + +::callout +You need an API key to use Google Maps. +:: + +## Example with Query + +```vue + +``` + +## Example with Coordinates + +```vue + +``` + +## Props + +- `apiKey`: The [API key](https://developers.google.com/maps/documentation/javascript/get-api-key) to use Google Maps API. + - **type**: `string` + - **required** +- `q`: A query to search for. + - **type**: `string` +- `center`: Coordinates to set the map to + - **type**: `LatLng` +- `zoom`: Zoom value for the map + - **type**: `number` +- `width`: Width of the player + - **type**: `string` +- `height`: Height of the player + - **type**: `string` +- `params`: [Parameters](https://developers.google.com/maps/documentation/javascript/load-maps-js-api#optional_parameters) for the map. + +Either a query (q) or coordinates (center) are needed for the map to function properly. diff --git a/docs/3.api/1.components/13.youtube-embed.md b/docs/3.api/1.components/13.youtube-embed.md new file mode 100644 index 0000000000..97aa16597f --- /dev/null +++ b/docs/3.api/1.components/13.youtube-embed.md @@ -0,0 +1,39 @@ +--- +title: "" +description: A simple and performant YouTube component. +links: + - label: Source + icon: i-simple-icons-github + to: https://github.com/nuxt/scripts-and-assets/blob/main/modules/nuxt-third-party-capital/src/runtime/components/YoutubeEmbed.ts + size: xs +--- + +The `` component can be used to display a YouTube embed. +It uses [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) to load significantly faster. + +## Minimal Example + +```vue + +``` + +## Props + +- `videoId`: The ID of the video + - **type**: `string` + - **required** +- `playLabel`: The label of the play button. This is for a11y purposes. + - **type**: `string` + - **required** +- `width`: Width of the player + - **type**: `string` +- `height`: Height of the player + - **type**: `string` +- `params`: [Parameters](https://developers.google.com/youtube/player_parameters#Parameters) for the player. diff --git a/docs/3.api/2.composables/use-google-analytics.md b/docs/3.api/2.composables/use-google-analytics.md index 0a83e2587b..2c52736397 100644 --- a/docs/3.api/2.composables/use-google-analytics.md +++ b/docs/3.api/2.composables/use-google-analytics.md @@ -14,31 +14,7 @@ The `useGoogleAnalytics` composable function allows you to include [Google Analy If Google Tag Manager is already included in your application, you can configure Google Analytics directly using it, rather than including Google Analytics as a separate component. Refer to the [documentation](https://developers.google.com/analytics/devguides/collection/ga4/tag-options#what-is-gtm) to learn more about the differences between Tag Manager and gtag.js. :: -## Type - -```ts -useGoogleAnalytics(options: ThirdPartyScriptOptions): ThirdPartyScriptApi -``` - -## Params - -An object containing the following options: - -| name | type | description | -|:-----|:-------|:--------------------------------| -| id | string | Google Analytics [measurement ID](https://support.google.com/analytics/answer/12270356). (required) | - -## Return values - -An object that contains a special `$script` property that gives you access to the underlying script instance. - -- `$script.waitForLoad`: A promise that resolves when the script is ready to use. It exposes `gtag` and `dataLayer`, which lets you interact with the API. - -::callout -Learn more about [useScript](https://unhead.unjs.io/usage/composables/use-script). -:: - -## Minimal example +## Minimal Example ```vue ``` + +## Type + +```ts +useGoogleAnalytics(options: ThirdPartyScriptOptions): ThirdPartyScriptApi +``` + +## Params + +An object containing the following options: + +- `id`: Google Analytics [measurement ID](https://support.google.com/analytics/answer/12270356). + - **type**: `string` + - **required** + +## Return Values + +An object that contains a special `$script` property that gives you access to the underlying script instance. + +- `$script.waitForLoad`: A promise that resolves when the script is ready to use. It exposes `gtag` and `dataLayer`, which lets you interact with the API. + +::callout +Learn more about [`useScript`](https://unhead.unjs.io/usage/composables/use-script). +:: diff --git a/docs/3.api/2.composables/use-google-tag-manager.md b/docs/3.api/2.composables/use-google-tag-manager.md new file mode 100644 index 0000000000..55141258cf --- /dev/null +++ b/docs/3.api/2.composables/use-google-tag-manager.md @@ -0,0 +1,60 @@ +--- +title: useGoogleTagManager +description: useGoogleTagManager allows you to install Google Tag Manager in your Nuxt app. +links: + - label: Source + icon: i-simple-icons-github + to: https://github.com/nuxt/scripts-and-assets/blob/main/modules/nuxt-third-party-capital/src/runtime/composables/googleTagManager.ts + size: xs +--- + +The `useGoogleTagManager` composable allows you to install [Google Tag Manager](https://developers.google.com/tag-platform/tag-manager/web) in your Nuxt application. + +## Minimal Example + +```vue + +``` + +## Example with Custom Event + +```vue + +``` + +## Type + +```ts +useGoogleTagManager(options: ThirdPartyScriptOptions): ThirdPartyScriptApi +``` + +## Params + +An object containing the following options: + +- `id`: Your GTM container ID. Usually starts with 'GTM-'. + - **type**: `string` + - **required** + +## Return Values + +An object that contains a special `$script` property that gives you access to the underlying script instance. + +- `$script.waitForLoad`: A promise that resolves when the script is ready to use. It exposes `google_tag_manager` and `dataLayer`, which lets you interact with the API. + +::callout +Learn more about [`useScript`](https://unhead.unjs.io/usage/composables/use-script). +::