useBrowserLocation

Demo

trigger: 'load'
state: null
length: 2
hash: ''
host: 'v9-13-0.vueuse.org'
hostname: 'v9-13-0.vueuse.org'
href: 'https://v9-13-0.vueuse.org/core/useBrowserLocation/'
origin: 'https://v9-13-0.vueuse.org'
pathname: '/core/useBrowserLocation/'
port: ''
protocol: 'https:'
search: ''

Usage

import { useBrowserLocation } from '@vueuse/core'

const location = useBrowserLocation()

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.

html

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

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

Type Declarations

typescript

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

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