Nuxt/docs/3.api/2.composables/use-request-url.md

title	description	links
useRequestURL	Access the incoming request URL with the useRequestURL composable.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/url.ts xs

useRequestURL is a helper function that returns an URL object working on both server-side and client-side.

::important When utilizing Hybrid Rendering with cache strategies, all incoming request headers are dropped when handling the cached responses via the Nitro caching layer (meaning useRequestURL will return localhost for the host).

You can define the cache.varies option to specify headers that will be considered when caching and serving the responses, such as host and x-forwarded-host for multi-tenant environments. ::

::code-group

<script setup lang="ts">
const url = useRequestURL()
</script>

<template>
  <p>URL is: {{ url }}</p>
  <p>Path is: {{ url.pathname }}</p>
</template>

<p>URL is: http://localhost:3000/about</p>
<p>Path is: /about</p>

::

::tip{icon="i-simple-icons-mdnwebdocs" color="gray" to="https://developer.mozilla.org/en-US/docs/Web/API/URL#instance_properties" target="_blank"} Read about the URL instance properties on the MDN documentation. ::