@nuxt/docs-nightly 4.3.0-29434410.5b16a51f → 4.3.0-29435873.41a564d2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -135,7 +135,7 @@ definePageMeta({
135
135
 
136
136
  Nuxt offers route validation via the `validate` property in [`definePageMeta()`](/docs/4.x/api/utils/define-page-meta) in each page you wish to validate.
137
137
 
138
- The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, this will cause a 404 error. You can also directly return an object with `statusCode`/`statusMessage` to customize the error returned.
138
+ The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, this will cause a 404 error. You can also directly return an object with `status`/`statusText` to customize the error returned.
139
139
 
140
140
  If you have a more complex use case, then you can use anonymous route middleware instead.
141
141
 
@@ -99,7 +99,7 @@ const handleError = () => clearError({ redirect: '/' })
99
99
 
100
100
  <template>
101
101
  <div>
102
- <h2>{{ error?.statusCode }}</h2>
102
+ <h2>{{ error?.status }}</h2>
103
103
  <button @click="handleError">
104
104
  Clear errors
105
105
  </button>
@@ -140,7 +140,7 @@ If you are running on Node 16 and you set any cookies when rendering your error
140
140
  ### `useError`
141
141
 
142
142
  ```ts [TS Signature]
143
- function useError (): Ref<Error | { url, statusCode, statusMessage, message, description, data }>
143
+ function useError (): Ref<Error | { url, status, statusText, message, description, data }>
144
144
  ```
145
145
 
146
146
  This function will return the global Nuxt error that is being handled.
@@ -152,7 +152,7 @@ Read more about `useError` composable.
152
152
  ### `createError`
153
153
 
154
154
  ```ts [TS Signature]
155
- function createError (err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error
155
+ function createError (err: string | { cause, data, message, name, stack, status, statusText, fatal }): Error
156
156
  ```
157
157
 
158
158
  Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
@@ -168,8 +168,8 @@ const { data } = await useFetch(`/api/movies/${route.params.slug}`)
168
168
 
169
169
  if (!data.value) {
170
170
  throw createError({
171
- statusCode: 404,
172
- statusMessage: 'Page Not Found',
171
+ status: 404,
172
+ statusText: 'Page Not Found',
173
173
  })
174
174
  }
175
175
  </script>
@@ -182,7 +182,7 @@ Read more about `createError` util.
182
182
  ### `showError`
183
183
 
184
184
  ```ts [TS Signature]
185
- function showError (err: string | Error | { statusCode, statusMessage }): Error
185
+ function showError (err: string | Error | { status, statusText }): Error
186
186
  ```
187
187
 
188
188
  You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/4.x/getting-started/error-handling#clearerror).
@@ -16,7 +16,7 @@ const props = defineProps<{ error: NuxtError }>()
16
16
 
17
17
  <template>
18
18
  <div>
19
- <h1>{{ error.statusCode }}</h1>
19
+ <h1>{{ error.status }}</h1>
20
20
  <NuxtLink to="/">Go back home</NuxtLink>
21
21
  </div>
22
22
  </template>
@@ -31,12 +31,16 @@ The error page has a single prop - `error` which contains an error for you to ha
31
31
  The `error` object provides the following fields:
32
32
  ```ts
33
33
  interface NuxtError {
34
- statusCode: number
34
+ status: number
35
35
  fatal: boolean
36
36
  unhandled: boolean
37
- statusMessage?: string
37
+ statusText?: string
38
38
  data?: unknown
39
39
  cause?: unknown
40
+ // legacy/deprecated equivalent of `status`
41
+ statusCode: number
42
+ // legacy/deprecated equivalent of `statusText`
43
+ statusMessage?: string
40
44
  }
41
45
  ```
42
46
 
@@ -44,8 +48,8 @@ If you have an error with custom fields they will be lost; you should assign the
44
48
 
45
49
  ```ts
46
50
  throw createError({
47
- statusCode: 404,
48
- statusMessage: 'Page Not Found',
51
+ status: 404,
52
+ statusText: 'Page Not Found',
49
53
  data: {
50
54
  myCustomField: true,
51
55
  },
@@ -295,8 +295,8 @@ export default defineEventHandler((event) => {
295
295
 
296
296
  if (!Number.isInteger(id)) {
297
297
  throw createError({
298
- statusCode: 400,
299
- statusMessage: 'ID should be an integer',
298
+ status: 400,
299
+ statusText: 'ID should be an integer',
300
300
  })
301
301
  }
302
302
  return 'All good'
@@ -54,7 +54,7 @@ After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app
54
54
  After initializing plugins and before executing middleware, Nuxt calls the `validate` method if it is defined in the `definePageMeta` function. The `validate` method, which can be synchronous or asynchronous, is often used to validate dynamic route parameters.
55
55
 
56
56
  - The `validate` function should return `true` if the parameters are valid.
57
- - If validation fails, it should return `false` or an object containing a `statusCode` and/or `statusMessage` to terminate the request.
57
+ - If validation fails, it should return `false` or an object containing a `status` and/or `statusText` to terminate the request.
58
58
 
59
59
  For more information, see the [Route Validation documentation](/docs/4.x/getting-started/routing#route-validation).
60
60
 
@@ -98,7 +98,7 @@ import type { UseFetchOptions } from 'nuxt/app'
98
98
 
99
99
  interface CustomError {
100
100
  message: string
101
- statusCode: number
101
+ status: number
102
102
  }
103
103
 
104
104
  export function useAPI<T> (
@@ -65,7 +65,7 @@ export default defineEventHandler(async (event) => {
65
65
  return {}
66
66
  }
67
67
  throw createError({
68
- statusCode: 401,
68
+ status: 401,
69
69
  message: 'Bad credentials',
70
70
  })
71
71
  })
@@ -22,8 +22,8 @@ You can use this composable in your components, pages, or plugins to access or r
22
22
 
23
23
  ```ts
24
24
  interface NuxtError<DataT = unknown> {
25
- statusCode: number
26
- statusMessage: string
25
+ status: number
26
+ statusText: string
27
27
  message: string
28
28
  data?: DataT
29
29
  error?: true
@@ -12,9 +12,9 @@ You can use this function to create an error object with additional metadata. It
12
12
 
13
13
  ## Parameters
14
14
 
15
- - `err`: `string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }`
15
+ - `err`: `string | { cause, data, message, name, stack, status, statusText, fatal }`
16
16
 
17
- You can pass either a string or an object to the `createError` function. If you pass a string, it will be used as the error `message`, and the `statusCode` will default to `500`. If you pass an object, you can set multiple properties of the error, such as `statusCode`, `message`, and other error properties.
17
+ You can pass either a string or an object to the `createError` function. If you pass a string, it will be used as the error `message`, and the `status` will default to `500`. If you pass an object, you can set multiple properties of the error, such as `status`, `message`, and other error properties.
18
18
 
19
19
  ## In Vue App
20
20
 
@@ -30,7 +30,7 @@ If you throw an error created with `createError`:
30
30
  const route = useRoute()
31
31
  const { data } = await useFetch(`/api/movies/${route.params.slug}`)
32
32
  if (!data.value) {
33
- throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
33
+ throw createError({ status: 404, statusText: 'Page Not Found' })
34
34
  }
35
35
  </script>
36
36
  ```
@@ -44,12 +44,12 @@ Use `createError` to trigger error handling in server API routes.
44
44
  ```ts [server/api/error.ts]
45
45
  export default eventHandler(() => {
46
46
  throw createError({
47
- statusCode: 404,
48
- statusMessage: 'Page Not Found',
47
+ status: 404,
48
+ statusText: 'Page Not Found',
49
49
  })
50
50
  })
51
51
  ```
52
52
 
53
- In API routes, using `createError` by passing an object with a short `statusMessage` is recommended because it can be accessed on the client side. Otherwise, a `message` passed to `createError` on an API route will not propagate to the client. Alternatively, you can use the `data` property to pass data back to the client. In any case, always consider avoiding to put dynamic user input to the message to avoid potential security issues.
53
+ In API routes, using `createError` by passing an object with a short `statusText` is recommended because it can be accessed on the client side. Otherwise, a `message` passed to `createError` on an API route will not propagate to the client. Alternatively, you can use the `data` property to pass data back to the client. In any case, always consider avoiding to put dynamic user input to the message to avoid potential security issues.
54
54
 
55
55
  :read-more{to="/docs/4.x/getting-started/error-handling"}
@@ -39,7 +39,7 @@ You can use route middleware to throw errors and show helpful error messages:
39
39
  ```ts [app/middleware/error.ts]
40
40
  export default defineNuxtRouteMiddleware((to) => {
41
41
  if (to.params.id === '1') {
42
- throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
42
+ throw createError({ status: 404, statusText: 'Page Not Found' })
43
43
  }
44
44
  })
45
45
  ```
@@ -130,7 +130,7 @@ interface PageMeta {
130
130
 
131
131
  - **Type**: `(route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>`
132
132
 
133
- Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
133
+ Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
134
134
 
135
135
  **`scrollToTop`**
136
136
 
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: 'setResponseStatus'
3
- description: setResponseStatus sets the statusCode (and optionally the statusMessage) of the response.
3
+ description: setResponseStatus sets the status (and optionally the statusText) of the response.
4
4
  links:
5
5
  - label: Source
6
6
  icon: i-simple-icons-github
@@ -10,7 +10,7 @@ links:
10
10
 
11
11
  Nuxt provides composables and utilities for first-class server-side-rendering support.
12
12
 
13
- `setResponseStatus` sets the statusCode (and optionally the statusMessage) of the response.
13
+ `setResponseStatus` sets the status (and optionally the statusText) of the response.
14
14
 
15
15
  ::important
16
16
  `setResponseStatus` can only be called in the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context).
@@ -12,13 +12,13 @@ Within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-contex
12
12
 
13
13
  **Parameters:**
14
14
 
15
- - `error`: `string | Error | Partial<{ cause, data, message, name, stack, statusCode, statusMessage }>`
15
+ - `error`: `string | Error | Partial<{ cause, data, message, name, stack, status, statusText }>`
16
16
 
17
17
  ```ts
18
18
  showError('😱 Oh no, an error has been thrown.')
19
19
  showError({
20
- statusCode: 404,
21
- statusMessage: 'Page Not Found',
20
+ status: 404,
21
+ statusText: 'Page Not Found',
22
22
  })
23
23
  ```
24
24
 
@@ -124,7 +124,7 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/4.x/api/utils/d
124
124
 
125
125
  ## `validate`
126
126
 
127
- The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
127
+ The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
128
128
 
129
129
  ```diff [app/pages/users/[id\\].vue]
130
130
  - <script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/docs-nightly",
3
- "version": "4.3.0-29434410.5b16a51f",
3
+ "version": "4.3.0-29435873.41a564d2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/nuxt/nuxt.git",