diff --git a/docs/3.api/1.composables/use-request-url.md b/docs/3.api/1.composables/use-request-url.md
new file mode 100644
index 0000000000..452629c579
--- /dev/null
+++ b/docs/3.api/1.composables/use-request-url.md
@@ -0,0 +1,25 @@
+# useRequestURL
+
+`useRequestURL` is a helper function that returns an [URL object](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) working on both server-side and client-side.
+
+::code-group
+
+```vue [pages/about.vue]
+
+
+
+ URL is: {{ url }} Path is: {{ url.pathname }}
URL is: http://localhost:3000/about
+Path is: /about
+``` + +:: + +You can find the list of the [URL instance properties](https://developer.mozilla.org/en-US/docs/Web/API/URL#instance_properties) on the MDN documentation. diff --git a/docs/5.community/5.framework-contribution.md b/docs/5.community/5.framework-contribution.md index 44872e9e02..a15fb759b1 100644 --- a/docs/5.community/5.framework-contribution.md +++ b/docs/5.community/5.framework-contribution.md @@ -59,13 +59,13 @@ Once you've read the [general contribution guide](/docs/community/contribution), While working on a PR, you will likely want to check if your changes are working correctly. -You can modify the example app in `playground/`, and run it with `yarn dev`. Please make sure not to commit it to your branch, but it could be helpful to add some example code to your PR description. This can help reviewers and other Nuxt users understand the feature you've built in-depth. +You can modify the example app in `playground/`, and run it with `pnpm dev`. Please make sure not to commit it to your branch, but it could be helpful to add some example code to your PR description. This can help reviewers and other Nuxt users understand the feature you've built in-depth. ## Testing Every new feature should have a corresponding unit test (if possible). The `test` folder in this repository is currently a work in progress, but do your best to create a new test following the example of what's already there. -Before creating a PR or marking it as ready-to-review, ensure that all tests pass by running `yarn test` locally. +Before creating a PR or marking it as ready-to-review, ensure that all tests pass by running `pnpm test:fixtures` locally. ## Linting @@ -126,12 +126,6 @@ To contribute to Nuxt, you need to set up a local environment. git checkout -b my-new-branch ``` -::js-doc{file=packages/nuxt/src/test.js function=useState} -:: - -::doc-link{file=packages/nuxt/src/test.js function=useState} -:: - ### Set Up Documentation Website in Local Environment The Nuxt documentation is currently deployed within [nuxt/nuxt.com](https://github.com/nuxt/nuxt.com) as a layer. diff --git a/packages/nuxt/src/app/composables/index.ts b/packages/nuxt/src/app/composables/index.ts index e40cb76ce6..8f154d0ebb 100644 --- a/packages/nuxt/src/app/composables/index.ts +++ b/packages/nuxt/src/app/composables/index.ts @@ -31,3 +31,4 @@ export { preloadComponents, prefetchComponents, preloadRouteComponents } from '. export { isPrerendered, loadPayload, preloadPayload, definePayloadReducer, definePayloadReviver } from './payload' export type { ReloadNuxtAppOptions } from './chunk' export { reloadNuxtApp } from './chunk' +export { useRequestURL } from './url' diff --git a/packages/nuxt/src/app/composables/url.ts b/packages/nuxt/src/app/composables/url.ts new file mode 100644 index 0000000000..81a8b943f6 --- /dev/null +++ b/packages/nuxt/src/app/composables/url.ts @@ -0,0 +1,14 @@ +import { getRequestURL } from 'h3' +import { joinURL } from 'ufo' +import { useRequestEvent } from './ssr' +import { useRuntimeConfig } from '#app' + +export function useRequestURL () { + if (process.server) { + const { baseURL } = useRuntimeConfig().app + const url = getRequestURL(useRequestEvent()) + url.pathname = joinURL(baseURL, url.pathname) + return url + } + return new URL(window.location.href) +} diff --git a/packages/nuxt/src/imports/presets.ts b/packages/nuxt/src/imports/presets.ts index 2089198317..8f45524b3a 100644 --- a/packages/nuxt/src/imports/presets.ts +++ b/packages/nuxt/src/imports/presets.ts @@ -33,6 +33,7 @@ const appPreset = defineUnimportPreset({ 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', + 'useRequestURL', 'setResponseStatus', 'setPageLayout', 'onNuxtReady', diff --git a/test/basic.test.ts b/test/basic.test.ts index e18c5bfeb1..ebc2a1774d 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -372,6 +372,13 @@ describe('pages', () => { }) }) +describe('nuxt composables', () => { + it('has useRequestURL()', async () => { + const html = await $fetch('/url') + expect(html).toContain('path: /url') + }) +}) + describe('rich payloads', () => { it('correctly serializes and revivifies complex types', async () => { const html = await $fetch('/json-payload') diff --git a/test/fixtures/basic/pages/url.vue b/test/fixtures/basic/pages/url.vue new file mode 100644 index 0000000000..c3d77074b7 --- /dev/null +++ b/test/fixtures/basic/pages/url.vue @@ -0,0 +1,9 @@ + + + +