useRequestURL · Nuxt Composables

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

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.

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

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

Read about the URL instance properties on the MDN documentation.

useRequestHeaders

Use useRequestHeaders to access the incoming request headers.

useRouteAnnouncer

This composable observes the page title changes and updates the announcer message accordingly.