@nuxt/docs-nightly 4.0.1-29211316.5018ed23 → 4.0.1-29212698.365e81c1

package/1.getting-started/01.introduction.md

@@ -24,7 +24,7 @@ Nuxt uses conventions and an opinionated directory structure to automate repetit
 - **Server-side rendering out of the box:** Nuxt comes with built-in SSR capabilities, so you don't have to set up a separate server yourself.
 - **Auto-imports:** write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles.
 - **Data-fetching utilities:** Nuxt provides composables to handle SSR-compatible data fetching as well as different strategies.
-- **Zero-config TypeScript support:** write type-safe code without having to learn TypeScript with our auto-generated types and `tsconfig.json`
+- **Zero-config TypeScript support:** write type-safe code without having to learn TypeScript with our auto-generated types and `tsconfig.json`.
 - **Configured build tools:** we use [Vite](https://vite.dev) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in.
 
 Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**.
@@ -64,7 +64,7 @@ A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be
 
 ### Modular
 
-A module system allows to extend Nuxt with custom features and integrations with third-party services.
+A module system allows you to extend Nuxt with custom features and integrations with third-party services.
 
 :read-more{title="Nuxt Modules Concept" to="/docs/guide/concepts/modules"}
 

package/1.getting-started/03.configuration.md

@@ -100,7 +100,7 @@ const runtimeConfig = useRuntimeConfig()
 
 ## App Configuration
 
-The `app.config.ts` file, located in the source directory (by default the root of the project), is used to expose public variables that can be determined at build time. Contrary to the `runtimeConfig` option, these can not be overridden using environment variables.
+The `app.config.ts` file, located in the source directory (by default the root of the project), is used to expose public variables that can be determined at build time. Contrary to the `runtimeConfig` option, these cannot be overridden using environment variables.
 
 A minimal configuration file exports the `defineAppConfig` function containing an object with your configuration. The `defineAppConfig` helper is globally available without import.
 

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

@@ -88,7 +88,7 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
 
 ![Layouts are wrapper around pages](/assets/docs/getting-started/views/layouts.svg)
 
-Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
+Layouts are wrappers around pages that contain a common User Interface for several pages, such as header and footer displays. Layouts are Vue files using `<slot />` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
 ::note
 If you only have a single layout in your application, we recommend using [`app.vue`](/docs/guide/directory-structure/app) with [`<NuxtPage />`](/docs/api/components/nuxt-page) instead.

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

@@ -119,7 +119,7 @@ export default defineNuxtConfig({
 
 ## External Stylesheets
 
-You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included like this.
+You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included this way.
 
 You can manipulate the head with the [`app.head`](/docs/api/nuxt-config#head) property of your Nuxt configuration:
 
@@ -409,7 +409,7 @@ You can use [CSS Modules](https://github.com/css-modules/css-modules) with the m
 
 ### Preprocessors Support
 
-SFC style blocks support preprocessors syntax. Vite come with built-in support for .scss, .sass, .less, .styl and .stylus files without configuration. You just need to install them first, and they will be available directly in SFC with the lang attribute.
+SFC style blocks support preprocessor syntax. Vite comes with built-in support for .scss, .sass, .less, .styl and .stylus files without configuration. You just need to install them first, and they will be available directly in SFC with the lang attribute.
 
 ::code-group
 

package/1.getting-started/08.seo-meta.md

@@ -12,7 +12,7 @@ and numerous configuration options to manage your app's head and SEO meta tags.
 Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
 
 ::important
-This method does not allow you to provide reactive data. We recommend to use `useHead()` in `app.vue`.
+This method does not allow you to provide reactive data. We recommend using `useHead()` in `app.vue`.
 ::
 
 It's good practice to set tags here that won't change such as your site title default, language and favicon.
@@ -75,7 +75,7 @@ useHead({
 </script>
 ```
 
-We recommend to take a look at the [`useHead`](/docs/api/composables/use-head) and [`useHeadSafe`](/docs/api/composables/use-head-safe) composables.
+We recommend taking a look at the [`useHead`](/docs/api/composables/use-head) and [`useHeadSafe`](/docs/api/composables/use-head-safe) composables.
 
 ## `useSeoMeta`
 

package/1.getting-started/09.transitions.md

@@ -16,7 +16,7 @@ You can enable page transitions to apply an automatic transition for all your [p
 export default defineNuxtConfig({
   app: {
     pageTransition: { name: 'page', mode: 'out-in' }
-  },
+  }
 })
 ```
 
@@ -121,7 +121,7 @@ You can enable layout transitions to apply an automatic transition for all your
 export default defineNuxtConfig({
   app: {
     layoutTransition: { name: 'layout', mode: 'out-in' }
-  },
+  }
 })
 ```
 
@@ -470,4 +470,4 @@ export default defineNuxtRouteMiddleware(to => {
 
 ### Known Issues
 
-- If you perform data fetching within your page setup functions, that you may wish to reconsider using this feature for the moment. (By design, View Transitions completely freeze DOM updates whilst they are taking place.) We're looking at restrict the View Transition to the final moments before `<Suspense>` resolves, but in the interim you may want to consider carefully whether to adopt this feature if this describes you.
+- If you perform data fetching within your page setup functions, you may wish to reconsider using this feature for the moment. (By design, View Transitions completely freeze DOM updates whilst they are taking place.) We're looking at restricting the View Transition to the final moments before `<Suspense>` resolves, but in the interim you may want to consider carefully whether to adopt this feature if this describes you.

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

@@ -9,7 +9,7 @@ Nuxt comes with two composables and a built-in library to perform data-fetching
 In a nutshell:
 
 - [`$fetch`](/docs/api/utils/dollarfetch) is the simplest way to make a network request.
-- [`useFetch`](/docs/api/composables/use-fetch) is wrapper around `$fetch` that fetches data only once in [universal rendering](/docs/guide/concepts/rendering#universal-rendering).
+- [`useFetch`](/docs/api/composables/use-fetch) is a wrapper around `$fetch` that fetches data only once in [universal rendering](/docs/guide/concepts/rendering#universal-rendering).
 - [`useAsyncData`](/docs/api/composables/use-async-data) is similar to `useFetch` but offers more fine-grained control.
 
 Both `useFetch` and `useAsyncData` share a common set of options and patterns that we will detail in the last sections.
@@ -81,7 +81,7 @@ async function addTodo() {
 
 ::warning
 Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](#the-need-for-usefetch-and-useasyncdata). :br
-It is recommended to use `$fetch` for client-side interactions (event based) or combined with [`useAsyncData`](#useasyncdata) when fetching the initial component data.
+It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](#useasyncdata) when fetching the initial component data.
 ::
 
 ::read-more{to="/docs/api/utils/dollarfetch"}
@@ -483,7 +483,7 @@ If you need to change the URL based on a reactive value, you may want to use a [
 
 #### Computed URL
 
-Sometimes you may need to compute an URL from reactive values, and refresh the data each time these change. Instead of juggling your way around, you can attach each param as a reactive value. Nuxt will automatically use the reactive value and re-fetch each time it changes.
+Sometimes you may need to compute a URL from reactive values, and refresh the data each time these change. Instead of juggling your way around, you can attach each param as a reactive value. Nuxt will automatically use the reactive value and re-fetch each time it changes.
 
 ```vue
 <script setup lang="ts">

package/1.getting-started/12.error-handling.md

@@ -109,7 +109,7 @@ const handleError = () => clearError({ redirect: '/' })
 Read more about `error.vue` and its uses.
 ::
 
-For custom errors we highly recommend to use `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.
+For custom errors we highly recommend using `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.
 
 ```ts twoslash [plugins/error-handler.ts]
 export default defineNuxtPlugin(nuxtApp => {

package/1.getting-started/15.prerendering.md

@@ -177,7 +177,7 @@ export default defineNuxtConfig({
 
 ### `prerender:generate` Nitro hook
 
-This is called for each route during prerendering. You can use this for fine grained handling of each route that gets prerendered.
+This is called for each route during prerendering. You can use this for fine-grained handling of each route that gets prerendered.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({

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

@@ -63,7 +63,7 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
 
 ::tip
 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.
-> ie. `vitest.config.m{ts,js}`.
+> i.e., `vitest.config.m{ts,js}`.
 ::
 
 ::tip

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

@@ -431,7 +431,7 @@ export default defineNuxtPlugin({
 })
 ```
 
-While not required it's recommend to update any imports from `@unhead/vue` to `#imports` or `nuxt/app`.
+While not required it's recommended to update any imports from `@unhead/vue` to `#imports` or `nuxt/app`.
 
 ```diff
 -import { useHead } from '@unhead/vue'
@@ -975,7 +975,41 @@ const importName = genSafeVariableName
 You can automate this step by running `npx codemod@latest nuxt/4/template-compilation-changes`
 ::
 
-### TypeScript Configuration Changes
+### Default TypeScript Configuration Changes
+
+🚦 **Impact Level**: Minimal
+
+#### What Changed
+
+`compilerOptions.noUncheckedIndexedAccess` is now `true` instead of `false`.
+
+#### Reasons for Change
+
+This change is a follow up to a prior [3.12 config update](https://github.com/nuxt/nuxt/pull/27485) where we improved our defaults, mostly adhering to [TotalTypeScript's recommendations](https://www.totaltypescript.com/tsconfig-cheat-sheet).
+
+#### Migration Steps
+
+There are two approaches:
+
+1. Run a typecheck on your app and fix any new errors (recommended).
+
+2. Override the new default in your `nuxt.config.ts`:
+
+   <!-- @case-police-ignore tsConfig -->
+
+   ```ts
+   export default defineNuxtConfig({
+     typescript: {
+       tsConfig: {
+         compilerOptions: {
+           noUncheckedIndexedAccess: false
+         }
+       }
+     }
+   })
+   ```
+
+### TypeScript Configuration Splitting
 
 🚦 **Impact Level**: Minimal
 

package/2.guide/1.concepts/3.rendering.md

@@ -70,7 +70,7 @@ Out of the box, a traditional Vue.js application is rendered in the browser (or
 
 **Benefits of client-side rendering:**
 - **Development speed**: When working entirely on the client-side, we don't have to worry about the server compatibility of the code, for example, by using browser-only APIs like the `window` object.
-- **Cheaper:** Running a server adds a cost of infrastructure as you would need to run on a platform that supports JavaScript. We can host Client-only applications on any static server with HTML, CSS, and JavaScript files.
+- **Cheaper:** Running a server adds a cost of infrastructure as you would need to run on a platform that supports JavaScript. We can host client-only applications on any static server with HTML, CSS, and JavaScript files.
 - **Offline:** Because code entirely runs in the browser, it can nicely keep working while the internet is unavailable.
 
 **Downsides of client-side rendering:**

package/2.guide/2.directory-structure/1.app/1.components.md

@@ -79,7 +79,7 @@ const MyButton = resolveComponent('MyButton')
 ```
 
 ::important
-If you are using `resolveComponent` to handle dynamic components, make sure not to insert anything but the name of the component, which must be a literal string and not be or contain a variable. The string is statically analyzed at compilation step.
+If you are using `resolveComponent` to handle dynamic components, make sure not to insert anything but the name of the component, which must be a literal string and not be or contain a variable. The string is statically analyzed at the compilation step.
 ::
 
 :video-accordion{title="Watch Daniel Roe's short video about resolveComponent()" videoId="4kq8E5IUM2U"}

package/2.guide/2.directory-structure/1.app/1.pages.md

@@ -377,7 +377,7 @@ Learn more about `<NuxtLink>` usage.
 Nuxt allows programmatic navigation through the `navigateTo()` utility method. Using this utility method, you will be able to programmatically navigate the user in your app. This is great for taking input from the user and navigating them dynamically throughout your application. In this example, we have a simple method called `navigate()` that gets called when the user submits a search form.
 
 ::note
-Ensure to always `await` on `navigateTo` or chain its result by returning from functions.
+Make sure to always `await` on `navigateTo` or chain its result by returning from functions.
 ::
 
 ```vue twoslash

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

@@ -813,7 +813,7 @@ Watch Vue School video about Nuxt module types.
 
 **Community modules** are modules prefixed (scoped) with `@nuxtjs/` (e.g. [`@nuxtjs/tailwindcss`](https://tailwindcss.nuxtjs.org)). They are proven modules made and maintained by community members. Again, contributions are welcome from anyone.
 
-**Third party and other community modules** are modules (often) prefixed with `nuxt-`. Anyone can make them, using this prefix allows these modules to be discoverable on npm. This is the best starting point to draft and try an idea!
+**Third-party and other community modules** are modules (often) prefixed with `nuxt-`. Anyone can make them, using this prefix allows these modules to be discoverable on npm. This is the best starting point to draft and try an idea!
 
 **Private or personal modules** are modules made for your own use case or company. They don't need to follow any naming rules to work with Nuxt and are often seen scoped under an npm organization (e.g. `@my-company/nuxt-auth`)
 

package/3.api/2.composables/use-response-header.md

@@ -15,7 +15,7 @@ This composable is available in Nuxt v3.14+.
 You can use the built-in [`useResponseHeader`](/docs/api/composables/use-response-header) composable to set any server response header within your pages, components, and plugins.
 
 ```ts
-// Set the a custom response header
+// Set a custom response header
 const header = useResponseHeader('X-My-Header');
 header.value = 'my-value';
 ```

package/3.api/3.utils/$fetch.md

@@ -20,7 +20,7 @@ Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api
 
 ## Usage
 
-We recommend to use [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
+We recommend using [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
 
 ```vue [app.vue]
 <script setup lang="ts">

package/3.api/5.kit/10.templates.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-Templates allows to generate extra files during development and build time. These files will be available in virtual filesystem and can be used in plugins, layouts, components, etc. `addTemplate` and `addTypeTemplate` allow you to add templates to the Nuxt application. `updateTemplates` allows you to regenerate templates that match the filter.
+Templates allow you to generate extra files during development and build time. These files will be available in virtual filesystem and can be used in plugins, layouts, components, etc. `addTemplate` and `addTypeTemplate` allow you to add templates to the Nuxt application. `updateTemplates` allows you to regenerate templates that match the filter.
 
 ## `addTemplate`
 

package/3.api/6.advanced/1.hooks.md

@@ -74,13 +74,13 @@ Hook                     | Arguments                  | Description
 `schema:resolved`        | `schema`                   | Allows extending resolved schema.
 `schema:beforeWrite`     | `schema`                   | Called before writing the given schema.
 `schema:written`         | -                          | Called after the schema is written.
-`vite:extend`            | `viteBuildContext`         | Allows to extend Vite default context.
-`vite:extendConfig`      | `viteInlineConfig, env`    | Allows to extend Vite default config.
-`vite:configResolved`    | `viteInlineConfig, env`    | Allows to read the resolved Vite config.
+`vite:extend`            | `viteBuildContext`         | Allows extending Vite default context.
+`vite:extendConfig`      | `viteInlineConfig, env`    | Allows extending Vite default config.
+`vite:configResolved`    | `viteInlineConfig, env`    | Allows reading the resolved Vite config.
 `vite:serverCreated`     | `viteServer, env`          | Called when the Vite server is created.
 `vite:compiled`          | -                          | Called after Vite server is compiled.
 `webpack:config`         | `webpackConfigs`           | Called before configuring the webpack compiler.
-`webpack:configResolved` | `webpackConfigs`           | Allows to read the resolved webpack config.
+`webpack:configResolved` | `webpackConfigs`           | Allows reading the resolved webpack config.
 `webpack:compile`        | `options`                  | Called right before compilation.
 `webpack:compiled`       | `options`                  | Called after resources are loaded.
 `webpack:change`         | `shortPath`                | Called on `change` on WebpackBar.

package/3.api/6.nuxt-config.md

@@ -37,13 +37,15 @@ your alias by prefixing it with `~`.
 
 **Example**:
 ```js
-export default {
+import { fileURLToPath } from "node:url";
+
+export default defineNuxtConfig({
   alias: {
     'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
     'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
     'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
   }
-}
+})
 ```
 
 ```html
@@ -814,7 +816,7 @@ export default defineNuxtConfig({
 
 ### `decorators`
 
-Enable to use experimental decorators in Nuxt and Nitro.
+Enable the use of experimental decorators in Nuxt and Nitro.
 
 - **Type**: `boolean`
 - **Default:** `false`

package/7.migration/6.pages-and-layouts.md

@@ -193,7 +193,7 @@ Most of the syntax and functionality are the same for the global [NuxtLink](/doc
 When migrating from Nuxt 2 to Nuxt 3, you will have to update how you programmatically navigate your users. In Nuxt 2, you had access to the underlying Vue Router with `this.$router`. In Nuxt 3, you can use the `navigateTo()` utility method which allows you to pass a route and parameters to Vue Router.
 
 ::warning
-Ensure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or chain its result by returning from functions.
+Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or chain its result by returning from functions.
 ::
 
 ::code-group

package/7.migration/8.runtime-config.md

@@ -27,7 +27,7 @@ export default defineNuxtConfig({
     public: {
       apiBase: '/api'
     }
-  },
+  }
 })
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.0.1-29211316.5018ed23",
+  "version": "4.0.1-29212698.365e81c1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",