@nuxt/docs-nightly 5.0.0-29776938.e673c552 → 5.0.0-29778218.1397500a

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 (11) hide show
  1. package/1.getting-started/06.styling.md +2 -2
  2. package/1.getting-started/08.seo-meta.md +1 -1
  3. package/1.getting-started/09.transitions.md +2 -2
  4. package/1.getting-started/10.data-fetching.md +3 -3
  5. package/1.getting-started/12.error-handling.md +1 -1
  6. package/1.getting-started/13.server.md +1 -1
  7. package/1.getting-started/15.prerendering.md +1 -1
  8. package/1.getting-started/16.deployment.md +1 -1
  9. package/1.getting-started/17.testing.md +2 -2
  10. package/3.guide/1.concepts/10.vuejs-development.md +65 -0
  11. package/package.json +1 -1
package/1.getting-started/06.styling.md CHANGED
@@ -288,7 +288,7 @@ This is an experimental option and you should refer to the Vite documentation an
288
288
 
289
289
  ## Single File Components (SFC) Styling
290
290
 
291
- One of the best things about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://github.com/Tahul/pinceau).
291
+ One of the best things about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have a fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://github.com/Tahul/pinceau).
292
292
 
293
293
  You can refer to the [Vue docs](https://vuejs.org/api/sfc-css-features) for a comprehensive reference about styling components in SFC.
294
294
 
@@ -364,7 +364,7 @@ Refer to the [Vue docs](https://vuejs.org/guide/essentials/class-and-style) for
364
364
 
365
365
  ### Dynamic Styles With `v-bind`
366
366
 
367
- You can reference JavaScript variable and expression within your style blocks with the v-bind function.
367
+ You can reference JavaScript variables and expressions within your style blocks with the v-bind function.
368
368
  The binding will be dynamic, meaning that if the variable value changes, the style will be updated.
369
369
 
370
370
  ```vue
package/1.getting-started/08.seo-meta.md CHANGED
@@ -147,7 +147,7 @@ const title = ref('Hello World')
147
147
  </template>
148
148
  ```
149
149
 
150
- It's suggested to wrap your components in either a `<Head>` or `<Html>` components as tags will be deduped more intuitively.
150
+ It's suggested to wrap your components in either a `<Head>` or `<Html>` component as tags will be deduped more intuitively.
151
151
 
152
152
  ::warning
153
153
  If you need to duplicate tags across client-server boundaries, apply a `key` attribute on the `<Head>` component.
package/1.getting-started/09.transitions.md CHANGED
@@ -25,7 +25,7 @@ export default defineNuxtConfig({
25
25
  ```
26
26
 
27
27
  ::note
28
- If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/4.x/getting-started/transitions#layout-transitions).
28
+ If you are changing layouts as well as pages, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/4.x/getting-started/transitions#layout-transitions).
29
29
  ::
30
30
 
31
31
  To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/4.x/directory-structure/app/app):
@@ -389,7 +389,7 @@ const next = computed(() => '/' + (id.value + 1))
389
389
 
390
390
  ::
391
391
 
392
- The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous:
392
+ The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous one:
393
393
 
394
394
  <video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.jpg">
395
395
  <source src="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.mp4" type="video/mp4">
package/1.getting-started/10.data-fetching.md CHANGED
@@ -52,7 +52,7 @@ async function handleFormSubmit () {
52
52
  </template>
53
53
  ```
54
54
 
55
- In the example above, `useFetch` would make sure that the request would occur in the server and is properly forwarded to the browser. `$fetch` has no such mechanism and is a better option to use when the request is solely made from the browser.
55
+ In the example above, `useFetch` would make sure that the request would occur on the server and is properly forwarded to the browser. `$fetch` has no such mechanism and is a better option to use when the request is solely made from the browser.
56
56
 
57
57
  ### Suspense
58
58
 
@@ -180,7 +180,7 @@ It's developer experience sugar for the most common use case. (You can find out
180
180
 
181
181
  :video-accordion{title="Watch a video from Alexander Lichter to dig deeper into the difference between useFetch and useAsyncData" videoId="0X-aOpSGabA"}
182
182
 
183
- There are some cases when using the [`useFetch`](/docs/4.x/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
183
+ There are some cases when using the [`useFetch`](/docs/4.x/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provides their own query layer. In this case, you can use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
184
184
 
185
185
  ```vue [app/pages/users.vue]
186
186
  <script setup lang="ts">
@@ -576,7 +576,7 @@ If you need to force a refresh when other reactive values change, you can also [
576
576
 
577
577
  ### Not immediate
578
578
 
579
- The `useFetch` composable will start fetching data the moment is invoked. You may prevent this by setting `immediate: false`, for example, to wait for user interaction.
579
+ The `useFetch` composable will start fetching data the moment it is invoked. You may prevent this by setting `immediate: false`, for example, to wait for user interaction.
580
580
 
581
581
  With that, you will need both the `status` to handle the fetch lifecycle, and `execute` to start the data fetch.
582
582
 
package/1.getting-started/12.error-handling.md CHANGED
@@ -59,7 +59,7 @@ You cannot currently define a server-side handler for these errors, but can rend
59
59
 
60
60
  You might encounter chunk loading errors due to a network connectivity failure or a new deployment (which invalidates your old, hashed JS chunk URLs). Nuxt provides built-in support for handling chunk loading errors by performing a hard reload when a chunk fails to load during route navigation.
61
61
 
62
- You can change this behavior by setting `experimental.emitRouteChunkError` to `false` (to disable hooking into these errors at all) or to `manual` if you want to handle them yourself. If you want to handle chunk loading errors manually, you can check out the [the automatic implementation](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/chunk-reload.client.ts) for ideas.
62
+ You can change this behavior by setting `experimental.emitRouteChunkError` to `false` (to disable hooking into these errors at all) or to `manual` if you want to handle them yourself. If you want to handle chunk loading errors manually, you can check out the [automatic implementation](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/chunk-reload.client.ts) for ideas.
63
63
 
64
64
  ## Error Page
65
65
 
package/1.getting-started/13.server.md CHANGED
@@ -84,7 +84,7 @@ export default defineNuxtConfig({
84
84
  ```
85
85
 
86
86
  ::read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering"}
87
- Learn about all available route rules are available to customize the rendering mode of your routes.
87
+ Learn about all the route rules available to customize the rendering mode of your routes.
88
88
  ::
89
89
 
90
90
  In addition, there are some route rules (for example, `ssr`, `appMiddleware`, and `noScripts`) that are Nuxt specific to change the behavior when rendering your pages to HTML.
package/1.getting-started/15.prerendering.md CHANGED
@@ -42,7 +42,7 @@ You can now deploy the `.output/public` directory to any static hosting service
42
42
 
43
43
  Static and prerender builds also emit `200.html` and `404.html` SPA fallbacks. See [What are 200.html and 404.html?](/docs/4.x/guide/concepts/rendering#what-are-200html-and-404html).
44
44
 
45
- Working of the Nitro crawler:
45
+ How the Nitro crawler works:
46
46
 
47
47
  1. Load the HTML of your application's root route (`/`), any non-dynamic pages in your `~/pages` directory, and any other routes in the `nitro.prerender.routes` array.
48
48
  2. Save the HTML and `_payload.json` to the `~/.output/public/` directory to be served statically.
package/1.getting-started/16.deployment.md CHANGED
@@ -123,7 +123,7 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
123
123
 
124
124
  ## Presets
125
125
 
126
- In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
126
+ In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and a minimal amount of configuration.
127
127
 
128
128
  You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file:
129
129
 
package/1.getting-started/17.testing.md CHANGED
@@ -93,7 +93,7 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
93
93
  3. If your Nuxt-environment tests live outside `test/nuxt/`, see [TypeScript Support in Tests](#typescript-support-in-tests) to add them to the TypeScript context.
94
94
 
95
95
  ::tip
96
- When importing `@nuxt/test-utils` in your vitest config, It is necessary to have `"type": "module"` specified in your `package.json` or rename your vitest config file appropriately.
96
+ When importing `@nuxt/test-utils` in your vitest config, it is necessary to have `"type": "module"` specified in your `package.json` or rename your vitest config file appropriately.
97
97
  > i.e., `vitest.config.m{ts,js}`.
98
98
  ::
99
99
 
@@ -831,7 +831,7 @@ We provide built-in support using Playwright within `@nuxt/test-utils`, either p
831
831
 
832
832
  #### `createPage(url)`
833
833
 
834
- Within `vitest`, `jest` or `cucumber`, you can create a configured Playwright browser instance with `createPage`, and (optionally) point it at a path from the running server. You can find out more about the API methods available from [in the Playwright documentation](https://playwright.dev/docs/api/class-page).
834
+ Within `vitest`, `jest` or `cucumber`, you can create a configured Playwright browser instance with `createPage`, and (optionally) point it at a path from the running server. You can find out more about the API methods available in the [Playwright documentation](https://playwright.dev/docs/api/class-page).
835
835
 
836
836
  ```ts twoslash
837
837
  import { createPage } from '@nuxt/test-utils/e2e'
package/3.guide/1.concepts/10.vuejs-development.md CHANGED
@@ -38,6 +38,71 @@ Most applications need multiple pages and a way to navigate between them. This i
38
38
 
39
39
  :link-example{to="/docs/4.x/examples/features/auto-imports"}
40
40
 
41
+ ## Vapor Mode
42
+
43
+ ::warning
44
+ Vapor Mode support is experimental and requires Vue 3.6 or newer. The API may change.
45
+ ::
46
+
47
+ [Vapor Mode](https://github.com/vuejs/core/releases/tag/v3.6.0-rc.1#about-vapor-mode) is an alternative compilation strategy introduced in Vue 3.6 that renders components without the Virtual DOM, lowering memory use and improving runtime performance.
48
+
49
+ Nuxt supports Vapor Mode in **interop mode**: your application is still rendered with the Virtual DOM, and you opt individual components or pages into Vapor by writing them as Vapor single-file components. This lets you adopt Vapor incrementally, and the rest of Nuxt (routing, `useAsyncData`, layouts, and most built-in components) keeps working unchanged.
50
+
51
+ ### Enabling Vapor Mode
52
+
53
+ Enable the `vue.vapor` option in your Nuxt config:
54
+
55
+ ```ts twoslash [nuxt.config.ts]
56
+ export default defineNuxtConfig({
57
+ vue: {
58
+ vapor: true,
59
+ },
60
+ })
61
+ ```
62
+
63
+ This installs Vue's `vaporInteropPlugin`, which lets Vapor and Virtual DOM components render alongside each other. You can then mark any component or page as Vapor by adding the `vapor` attribute to `<script setup>`:
64
+
65
+ ```vue [app/pages/index.vue]
66
+ <script setup vapor lang="ts">
67
+ const count = ref(0)
68
+ </script>
69
+
70
+ <template>
71
+ <button @click="count++">
72
+ count is {{ count }}
73
+ </button>
74
+ </template>
75
+ ```
76
+
77
+ ### Trying it out
78
+
79
+ Vapor Mode needs a version of Vue that includes both Vapor and its interop fixes. While Vue 3.6 is in pre-release, install a release candidate (or newer) that contains those fixes:
80
+
81
+ ```json [package.json]
82
+ {
83
+ "dependencies": {
84
+ "vue": "^3.6.0-rc.2"
85
+ }
86
+ }
87
+ ```
88
+
89
+ If you enable `vue.vapor` on an older version of Vue, Nuxt warns and disables it.
90
+
91
+ We recommend trying Vapor Mode in a fresh project rather than adding it to an existing one. You can also explore a working setup in the [Nuxt Vapor demo](https://github.com/danielroe/nuxt-vapor-demo).
92
+
93
+ ### Known limitations
94
+
95
+ Because Nuxt runs Vapor in interop mode, some patterns that rely on the Virtual DOM behave differently inside Vapor components:
96
+
97
+ - **Full Vapor apps are not yet supported.** The application root stays Virtual DOM and you opt in per component; we may support a full Vapor app later on.
98
+ - **Template refs** on a Vapor component do not expose `$el`.
99
+ - **Some built-in components inspect their slot content** and cannot read Vapor slot children. `<ClientOnly>` skips its attribute-forwarding fallthrough, and `<NuxtIsland>`, server components, and the head components that read text children (such as `<Title>`, `<Style>` and `<Noscript>`) warn if you pass a Vapor slot. Pass the value directly instead (for example, a string to `<Title>`).
100
+ - **The Options API is not supported** in Vapor components, so `asyncData` and `fetchKey` via `defineNuxtComponent` are unavailable. Use `<script setup>` with `useAsyncData` instead.
101
+ - **Keyed `onPrehydrate`** falls back to the unkeyed form (and warns in development), because there is no component instance to attach the key to.
102
+ - **Nuxt composables called after `await`** in a Vapor `<script setup>` may lose the Nuxt context. Call them before the first `await` where possible.
103
+
104
+ Most other Nuxt composables and built-in components work unchanged, because they rely on injection rather than on a component instance.
105
+
41
106
  ## Differences with Nuxt 2 / Vue 2
42
107
 
43
108
  Nuxt 3+ is based on Vue 3. The new major Vue version introduces several changes that Nuxt takes advantage of:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/docs-nightly",
3
- "version": "5.0.0-29776938.e673c552",
3
+ "version": "5.0.0-29778218.1397500a",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/nuxt/nuxt.git",