f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
87 lines
3.2 KiB
Markdown
87 lines
3.2 KiB
Markdown
---
|
|
category: Sensors
|
|
---
|
|
|
|
# useGeolocation
|
|
|
|
Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). It allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
|
|
|
|
## Usage
|
|
|
|
```ts
|
|
import { useGeolocation } from '@vueuse/core'
|
|
|
|
const { coords, locatedAt, error, resume, pause } = useGeolocation()
|
|
```
|
|
|
|
| State | Type | Description |
|
|
| --------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
| coords | [`Coordinates`](https://developer.mozilla.org/en-US/docs/Web/API/Coordinates) | information about the position retrieved like the latitude and longitude |
|
|
| locatedAt | `Date` | The time of the last geolocation call |
|
|
| error | `string` | An error message in case geolocation API fails. |
|
|
| resume | `function` | Control function to resume updating geolocation |
|
|
| pause | `function` | Control function to pause updating geolocation |
|
|
|
|
## Config
|
|
|
|
`useGeolocation` function takes [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object as an optional parameter.
|
|
|
|
## Component Usage
|
|
|
|
```vue
|
|
<template>
|
|
<UseGeolocation v-slot="{ coords: { latitude, longitude } }">
|
|
Latitude: {{ latitude }}
|
|
Longitude: {{ longitude }}
|
|
</UseGeolocation>
|
|
</template>
|
|
```
|
|
|
|
## Type Declarations
|
|
|
|
```ts
|
|
export interface UseGeolocationOptions
|
|
extends Partial<PositionOptions>,
|
|
ConfigurableNavigator {
|
|
immediate?: boolean
|
|
}
|
|
/**
|
|
* Reactive Geolocation API.
|
|
*
|
|
* @see https://vueuse.org/useGeolocation
|
|
* @param options
|
|
*/
|
|
export declare function useGeolocation(options?: UseGeolocationOptions): {
|
|
isSupported: ComputedRef<boolean>
|
|
coords: Ref<
|
|
{
|
|
readonly accuracy: number
|
|
readonly altitude: number | null
|
|
readonly altitudeAccuracy: number | null
|
|
readonly heading: number | null
|
|
readonly latitude: number
|
|
readonly longitude: number
|
|
readonly speed: number | null
|
|
},
|
|
| Omit<GeolocationCoordinates, "toJSON">
|
|
| {
|
|
readonly accuracy: number
|
|
readonly altitude: number | null
|
|
readonly altitudeAccuracy: number | null
|
|
readonly heading: number | null
|
|
readonly latitude: number
|
|
readonly longitude: number
|
|
readonly speed: number | null
|
|
}
|
|
>
|
|
locatedAt: ShallowRef<number | null, number | null>
|
|
error: ShallowRef<
|
|
GeolocationPositionError | null,
|
|
GeolocationPositionError | null
|
|
>
|
|
resume: () => void
|
|
pause: () => void
|
|
}
|
|
export type UseGeolocationReturn = ReturnType<typeof useGeolocation>
|
|
```
|