mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-13 09:33:54 +00:00
docs: add remaining third-party-capital api docs (#25592)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com> Co-authored-by: Julien Huang <julien.h.dev@gmail.com> Co-authored-by: Damian Głowala <damian.glowala.rebkow@gmail.com>
This commit is contained in:
Thorsten Kober
GitHub
parent
d0caae3c10
commit
ffda918f54
64
docs/3.api/1.components/12.google-maps.md
Normal file
64
docs/3.api/1.components/12.google-maps.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "<GoogleMaps>"
|
||||
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 `<GoogleMaps>` 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
|
||||
<template>
|
||||
<div>
|
||||
<GoogleMaps
|
||||
api-key="API_KEY"
|
||||
width="600"
|
||||
height="400"
|
||||
q="Space+Needle,Seattle+WA"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Example with Coordinates
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<GoogleMaps
|
||||
api-key="API_KEY"
|
||||
width="600"
|
||||
height="400"
|
||||
:center="{ lat: 47.62065090386302, lng: -122.34932031714334 }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 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.
|
||||
39
docs/3.api/1.components/13.youtube-embed.md
Normal file
39
docs/3.api/1.components/13.youtube-embed.md
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
title: "<YoutubeEmbed>"
|
||||
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 `<YoutubeEmbed>` 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
|
||||
<template>
|
||||
<div>
|
||||
<YoutubeEmbed
|
||||
video-id="d_IFKP1Ofq0"
|
||||
play-label="Play"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 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.
|
||||
@ -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<GoogleAnalyticsOptions, GoogleAnalyticsApi>): ThirdPartyScriptApi<GoogleAnalyticsApi>
|
||||
```
|
||||
|
||||
## 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
|
||||
<script setup>
|
||||
@ -59,3 +35,27 @@ $script.waitForLoad().then(({ gtag }) => {
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Type
|
||||
|
||||
```ts
|
||||
useGoogleAnalytics(options: ThirdPartyScriptOptions<GoogleAnalyticsOptions, GoogleAnalyticsApi>): ThirdPartyScriptApi<GoogleAnalyticsApi>
|
||||
```
|
||||
|
||||
## 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).
|
||||
::
|
||||
|
||||
60
docs/3.api/2.composables/use-google-tag-manager.md
Normal file
60
docs/3.api/2.composables/use-google-tag-manager.md
Normal file
@ -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
|
||||
<script setup>
|
||||
useGoogleTagManager({ id: 'GTM-123456' })
|
||||
</script>
|
||||
```
|
||||
|
||||
## Example with Custom Event
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
const { $script } = useGoogleTagManager({
|
||||
id: 'GTM-123456'
|
||||
})
|
||||
|
||||
$script.waitForLoad().then(({ dataLayer }) => {
|
||||
dataLayer.push({
|
||||
event: 'pageview',
|
||||
page_path: '/google-tag-manager'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
## Type
|
||||
|
||||
```ts
|
||||
useGoogleTagManager(options: ThirdPartyScriptOptions<GoogleTagManagerOptions, GoogleTagManagerApi>): ThirdPartyScriptApi<GoogleTagManagerApi>
|
||||
```
|
||||
|
||||
## 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).
|
||||
::
|
||||
Loading…
Reference in New Issue
Block a user