Skip to content

useBrowserLocation

Category
Export Size
884 B
Last Changed
4 days 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

ts
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

Show Type Declarations
ts
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 * * @__NO_SIDE_EFFECTS__ */ 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
}, | BrowserLocationState | { 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

NoiseFan

Changelog

No recent changes

Released under the MIT License.