Skip to content

useBrowserLocation

Category
Export Size
952 B
Last Changed
5 months ago

Reactive browser location

NOTE: If you're using Vue Router, use useRoute provided by Vue Router instead.

Demo

Input and hash will be changed:
trigger: 'load'

Usage

js
import { useBrowserLocation } from '@vueuse/core'

const location = useBrowserLocation()

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue
<UseBrowserLocation v-slot="{ location }">
  Browser Location: {{ location }}
</UseBrowserLocation>

Type Declarations

typescript
export interface BrowserLocationState {
  readonly trigger: string
  readonly state?: any
  readonly length?: number
  readonly origin?: string
  hash?: string
  host?: string
  hostname?: string
  href?: string
  pathname?: string
  port?: string
  protocol?: string
  search?: string
}
/**
 * Reactive browser location.
 *
 * @see https://vueuse.org/useBrowserLocation
 */
export declare function useBrowserLocation(options?: ConfigurableWindow): Ref<{
  readonly trigger: string
  readonly state?: any
  readonly length?: number | undefined
  readonly origin?: string | undefined
  hash?: string | undefined
  host?: string | undefined
  hostname?: string | undefined
  href?: string | undefined
  pathname?: string | undefined
  port?: string | undefined
  protocol?: string | undefined
  search?: string | undefined
}>
export type UseBrowserLocationReturn = ReturnType<typeof useBrowserLocation>

Source

SourceDemoDocs

Contributors

Anthony Fu
三咲智子 Kevin Deng
vaakian X
Mike
Eureka
Shinigami
wheat
Alex Kozack
Antério Vieira

Changelog

v10.0.0-beta.0 on 3/14/2023
a860c - feat: two-way binding (#2168)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)

Released under the MIT License.