npm - @nuxt/docs - Versions diffs - 3.17.3 → 4.0.0-0 - Mend

@nuxt/docs 3.17.3 → 4.0.0-0

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.

Files changed (15) hide show

package/1.getting-started/04.views.md +3 -1
package/1.getting-started/06.styling.md +3 -1
package/1.getting-started/10.data-fetching.md +2 -2
package/1.getting-started/17.testing.md +1 -1
package/1.getting-started/18.upgrade.md +4 -1
package/2.guide/2.directory-structure/1.pages.md +4 -0
package/2.guide/3.going-further/1.events.md +1 -1
package/2.guide/3.going-further/1.experimental-features.md +1 -53
package/2.guide/3.going-further/3.modules.md +1 -1
package/2.guide/4.recipes/4.sessions-and-authentication.md +1 -1
package/3.api/2.composables/use-async-data.md +1 -1
package/3.api/2.composables/use-fetch.md +1 -1
package/3.api/2.composables/use-nuxt-data.md +1 -1
package/3.api/5.kit/11.nitro.md +1 -1
package/package.json +1 -1

package/1.getting-started/04.views.md CHANGED Viewed

@@ -148,7 +148,9 @@ If you only need to modify the `<head>`, you can refer to the [SEO and meta sect
 You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
 The callback function of the `render:html` hook allows you to mutate the HTML before it is sent to the client.
-```ts twoslash [server/plugins/extend-html.ts]
+<!-- TODO: figure out how to use twoslash to inject types for a different context -->
+```ts [server/plugins/extend-html.ts]
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html, { event }) => {
     // This will be an object representation of the html template.

package/1.getting-started/06.styling.md CHANGED Viewed

@@ -153,7 +153,9 @@ If you need more advanced control, you can intercept the rendered html with a ho
 Create a plugin in `~/server/plugins/my-plugin.ts` like this:
-```ts twoslash [server/plugins/my-plugin.ts]
+<!-- TODO: figure out how to use twoslash to inject types for a different context -->
+```ts [server/plugins/my-plugin.ts]
 export default defineNitroPlugin((nitro) => {
   nitro.hooks.hook('render:html', (html) => {
     html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')

package/1.getting-started/10.data-fetching.md CHANGED Viewed

@@ -610,7 +610,7 @@ onMounted(() => console.log(document.cookie))
 </script>
 ```
-## Options API support
+## Options API Support
 Nuxt provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.
@@ -744,7 +744,7 @@ const { data } = await useFetch('/api/superjson', {
 ## Recipes
-### Consuming SSE (Server Sent Events) via POST request
+### Consuming SSE (Server-Sent Events) via POST request
 ::tip
 If you're consuming SSE via GET request, you can use [`EventSource`](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or VueUse composable [`useEventSource`](https://vueuse.org/core/useEventSource/).

package/1.getting-started/17.testing.md CHANGED Viewed

@@ -594,7 +594,7 @@ For local development or automated deploy pipelines, testing against a separate
 To utilize a separate target host for end-to-end tests, simply provide the `host` property of the `setup` function with the desired URL.
-```ts twoslash
+```ts
 import { setup, createPage } from '@nuxt/test-utils/e2e'
 import { describe, it, expect } from 'vitest'

package/1.getting-started/18.upgrade.md CHANGED Viewed

@@ -621,6 +621,7 @@ You can automate this step by running `npx codemod@latest nuxt/4/default-data-er
 If you encounter any issues you can revert back to the previous behavior with:
 ```ts twoslash [nuxt.config.ts]
+// @errors: 2353
 export default defineNuxtConfig({
   experimental: {
     defaults: {
@@ -644,6 +645,7 @@ Please report an issue if you are doing this, as we do not plan to keep this as
 Previously it was possible to pass `dedupe: boolean` to `refresh`. These were aliases of `cancel` (`true`) and `defer` (`false`).
 ```ts twoslash [app.vue]
+// @errors: 2322
 const { refresh } = await useAsyncData(async () => ({ message: 'Hello, Nuxt!' }))
 async function refreshData () {
@@ -657,7 +659,7 @@ These aliases were removed, for greater clarity.
 The issue came up when adding `dedupe` as an option to `useAsyncData`, and we removed the boolean values as they ended up being _opposites_.
-`refresh({ dedupe: false })` meant 'do not _cancel_ existing requests in favour of this new one'. But passing `dedupe: true` within the options of `useAsyncData` means 'do not make any new requests if there is an existing pending request.' (See [PR](https://github.com/nuxt/nuxt/pull/24564#pullrequestreview-1764584361).)
+`refresh({ dedupe: false })` meant **do not _cancel_ existing requests in favour of this new one**. But passing `dedupe: true` within the options of `useAsyncData` means **do not make any new requests if there is an existing pending request.** (See [PR](https://github.com/nuxt/nuxt/pull/24564#pullrequestreview-1764584361).)
 #### Migration Steps
@@ -696,6 +698,7 @@ Often users set an appropriately empty value, such as an empty array, to avoid t
 If you encounter any issues you can revert back to the previous behavior, for now, with:
 ```ts twoslash [nuxt.config.ts]
+// @errors: 2353
 export default defineNuxtConfig({
   experimental: {
     resetAsyncDataToUndefined: true,

package/2.guide/2.directory-structure/1.pages.md CHANGED Viewed

@@ -335,6 +335,10 @@ You may define a name for this page's route.
 You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information.
+#### `props`
+Allows accessing the route `params` as props passed to the page component. See[the `vue-router` docs](https://router.vuejs.org/guide/essentials/passing-props) for more information.
 ### Typing Custom Metadata
 If you add custom metadata for your pages, you may wish to do so in a type-safe way. It is possible to augment the type of the object accepted by `definePageMeta`:

package/2.guide/3.going-further/1.events.md CHANGED Viewed

@@ -74,7 +74,7 @@ declare module '#app' {
   }
 }
-declare module 'nitropack' {
+declare module 'nitro/types' {
   interface NitroRuntimeHooks {
     'your-nitro-hook': () => void;
   }

package/2.guide/3.going-further/1.experimental-features.md CHANGED Viewed

@@ -57,25 +57,11 @@ export default defineNuxtConfig({
 This feature will likely be removed in a near future.
 ::
-## treeshakeClientOnly
-Tree shakes contents of client-only components from server bundle.
-*Enabled by default.*
-```ts twoslash [nuxt.config.ts]
-export default defineNuxtConfig({
-  experimental: {
-    treeshakeClientOnly: true
-  }
-})
-```
 ## emitRouteChunkError
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediatly, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
@@ -240,44 +226,6 @@ export default defineNuxtConfig({
 You can follow the server components roadmap on GitHub.
 ::
-## configSchema
-Enables config schema support.
-*Enabled by default.*
-```ts twoslash [nuxt.config.ts]
-export default defineNuxtConfig({
-  experimental: {
-    configSchema: true
-  }
-})
-```
-## polyfillVueUseHead
-Adds a compatibility layer for modules, plugins, or user code relying on the old `@vueuse/head` API.
-```ts twoslash [nuxt.config.ts]
-export default defineNuxtConfig({
-  experimental: {
-    polyfillVueUseHead: false
-  }
-})
-```
-## respectNoSSRHeader
-Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
-```ts twoslash [nuxt.config.ts]
-export default defineNuxtConfig({
-  experimental: {
-    respectNoSSRHeader: false
-  }
-})
-```
 ## localLayerAliases
 Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories.

package/2.guide/3.going-further/3.modules.md CHANGED Viewed

@@ -614,7 +614,7 @@ export default defineNuxtModule({
         interface MyModuleNitroRules {
           myModule?: { foo: 'bar' }
         }
-        declare module 'nitropack' {
+        declare module 'nitro/types' {
           interface NitroRouteRules extends MyModuleNitroRules {}
           interface NitroRouteConfig extends MyModuleNitroRules {}
         }

package/2.guide/4.recipes/4.sessions-and-authentication.md CHANGED Viewed

@@ -162,7 +162,7 @@ export default defineNuxtRouteMiddleware(() => {
 ## Home Page
-Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user informations. If the user is not authenticated, they will be redirected to the login page.
+Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user information. If the user is not authenticated, they will be redirected to the login page.
 We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.

package/3.api/2.composables/use-async-data.md CHANGED Viewed

@@ -98,7 +98,7 @@ The `handler` function should be **side-effect free** to ensure predictable beha
     Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
   - `pick`: only pick specified keys in this array from the `handler` function result
   - `watch`: watch reactive sources to auto-refresh
-  - `deep`: return data in a deep ref object (it is `true` by default). It can be set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+  - `deep`: return data in a deep ref object. It is `false` by default to return data in a shallow ref object for performance.
   - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
     - `cancel` - cancels existing requests when a new one is made
     - `defer` - does not make new requests at all if there is a pending request

package/3.api/2.composables/use-fetch.md CHANGED Viewed

@@ -132,7 +132,7 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
     Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
   - `pick`: only pick specified keys in this array from the `handler` function result
   - `watch`: watch an array of reactive sources and auto-refresh the fetch result when they change. Fetch options and URL are watched by default. You can completely ignore reactive sources by using `watch: false`. Together with `immediate: false`, this allows for a fully-manual `useFetch`. (You can [see an example here](/docs/getting-started/data-fetching#watch) of using `watch`.)
-  - `deep`: return data in a deep ref object (it is `true` by default). It can be set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+  - `deep`: return data in a deep ref object. It is `false` by default to return data in a shallow ref object for performance.
   - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
     - `cancel` - cancels existing requests when a new one is made
     - `defer` - does not make new requests at all if there is a pending request

package/3.api/2.composables/use-nuxt-data.md CHANGED Viewed

@@ -108,5 +108,5 @@ async function addTodo () {
 ## Type
 ```ts
-useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }
+useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }
 ```

package/3.api/5.kit/11.nitro.md CHANGED Viewed

@@ -117,7 +117,7 @@ export default defineNuxtModule({
 ```ts twoslash
 // @errors: 2391
-import type { NitroDevEventHandler } from 'nitropack'
+import type { NitroDevEventHandler } from 'nitro/types'
 // ---cut---
 function addDevServerHandler (handler: NitroDevEventHandler): void
 ```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs",
-  "version": "3.17.3",
+  "version": "4.0.0-0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",