docs: improve various sections (#2040)

docs/content/1.getting-started/1.introduction.md

@@ -3,7 +3,7 @@
 Getting started with Nuxt 3 is straightforward.
 
 ::alert{type=warning icon=🚧}
-Nuxt 3 is currently in beta, keep in mind that **it is not yet production ready**.<br>
+Nuxt 3 is currently in beta, keep in mind that **it is not yet production-ready**.<br>
 Thank you in advance for your understanding 💛
 ::
 
@@ -44,7 +44,7 @@ If you have an existing Nuxt 2 project, we **strongly recommend** you begin by u
 
 ::list{type=info}
 
-* It's risk free! You can always remove the module from your config
+* It's risk-free! You can always remove the module from your config
 * Makes your project (almost) ready for Nuxt 3
 * Enjoy new DX improvements without major rewrites for Vue 3
 * Use Nitro engine for platform-agnostic and optimized deployments

docs/content/1.getting-started/3.bridge.md

@@ -11,7 +11,7 @@ Learn more in [Introduction](/getting-started/introduction).
 Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/usage)) but there are some limitations, notably that `useAsyncData` and `useFetch` composables are not available. Please read the rest of this page for details.
 ::
 
-Bridge is a forward-compatibility layer that allows you to experience many of new Nuxt 3 features by simply installing and enabling a Nuxt module.
+Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
 
 Using Nuxt Bridge, you can make sure your project is (almost) ready for Nuxt 3 and have the best developer experience without needing a major rewrite or risk breaking changes.
 

docs/content/1.getting-started/5.commands.md

@@ -2,7 +2,7 @@
 
 Nuxi is the new CLI experience for Nuxt 3
 
-Nuxt 3 has two main commands, one to start development server and one to make production assets.
+Nuxt 3 has two main commands, one to start the development server and one to make production assets.
 
 Since Nuxt 3 becomes a dev dependency thanks to the new [Nitro server](/concepts/server-engine), you only need to add two commands in your `package.json`:
 
@@ -64,7 +64,7 @@ npm run build
 
 ::
 
-Nuxt will create a [`.output`](/docs/directory-structure/output) directory with all your application, server and dependencies ready to be deployed. Checkout the [deployment](/docs/deployment) section to learn where and how you can deploy a Nuxt application using Nitro.
+Nuxt will create a [`.output`](/docs/directory-structure/output) directory with all your application, server and dependencies ready to be deployed. Check out the [deployment](/docs/deployment) section to learn where and how you can deploy a Nuxt application using Nitro.
 
 ## Upgrade Nuxt3 version
 

docs/content/1.getting-started/6.migration.md

@@ -23,7 +23,7 @@ Noticeable and/or breaking changes for Nuxt 3 other than the requirements of Nux
 - The [`pages/` directory](/docs/directory-structure/pages) conventions changed
 ::
 
-In table below there is an overall feature comparison table:
+The below table highlights an overall feature comparison:
 
 Feature / Version         | Nuxt 2  | Nuxt 3   | Changes required
 --------------------------|---------|----------|------------------
@@ -109,7 +109,7 @@ Your module needs should work even if it's only added to [`buildModules`](/docs/
 
 - Avoid updating `process.env` within a Nuxt module and reading by a nuxt plugin; use [`runtimeConfig`](/docs/directory-structure/nuxt.config#publicruntimeconfig) instead.
 - (*) Avoid depending on runtime hooks like `vue-renderer:*` for production
-- (*) Avoid adding `serverMiddleware` by importing them inside module. Instead, add them by referencing a file path so that they are independent of module context
+- (*) Avoid adding `serverMiddleware` by importing them inside the module. Instead, add them by referencing a file path so that they are independent of the module's context
 
 (*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
 

docs/content/2.concepts/1.introduction.md

@@ -14,7 +14,7 @@ To understand what is Nuxt, we need to understand what we need to create a moder
 - A routing library to handle client-side navigation, we chose [vue-router](https://next.router.vuejs.org).
 ::
 
-This is only the tip of the iceberg, imagine having to setup all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configuration to provide the best optimization and performance for any Vue applications.
+This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application.
 
 Nuxt takes care of all of this so you can focus on what matters: **creating your web application**.
 
@@ -33,7 +33,7 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/framework/
 - Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/framework/tree/main/packages/bridge)
 ::
 
-We recommend to read each concept to have a full vision of Nuxt capabilities and scope of each package.
+We recommend reading each concept to have a full vision of Nuxt capabilities and scope of each package.
 
 ## Are you Nuxt?
 

docs/content/2.concepts/3.typescript.md

@@ -4,7 +4,7 @@ Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access t
 
 ## Type-checking
 
-By default Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, for performance reasons. However, you can manually check your types using [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc).
+By default, Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, for performance reasons. However, you can manually check your types using [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc).
 
 ```bash
 npx vue-tsc --noEmit
@@ -34,7 +34,7 @@ Nitro also [auto-generates types](/concepts/server-engine#typed-api-routes) for
 
 TypeScript comes with certain checks to give you more safety and analysis of your program.
 
-Once you’ve converted your codebase to TypeScript and felt familiar with, you can start enabling these checks for greater safety. ([read more](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks))
+Once you’ve converted your codebase to TypeScript and felt familiar with it, you can start enabling these checks for greater safety. ([read more](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks))
 
 In order to enable strict type checking, you have to update `nuxt.confg`:
 

docs/content/3.docs/1.usage/1.data-fetching.md

@@ -71,7 +71,7 @@ This composable behaves identically to `useAsyncData` with the `lazy: true` opti
 
 Within your pages, components and plugins you can use `useFetch` to universally fetch from any URL.
 
-This composable provides a convenient wrapper around `useAsyncData` and `$fetch` and automatically generates a key based on url and fetch options and infers API response type.
+This composable provides a convenient wrapper around `useAsyncData` and `$fetch`. It automatically generates a key based on URL and fetch options, as well as infers API response type.
 
 ### Usage
 
@@ -90,7 +90,7 @@ Available options:
 * Options from [ohmyfetch](https://github.com/unjs/ohmyfetch)
   * `method`: Request method
   * `params`: Query params
-  * `baseURL`: Base URL for request
+  * `baseURL`: Base URL for the request
 * Options from `useAsyncData`
   * `lazy`
   * `server`

docs/content/3.docs/1.usage/2.state.md

@@ -1,8 +1,8 @@
 # State
 
-Nuxt provides `useState` composable to create a reactive and ssr-friendly shared state across components.
+Nuxt provides `useState` composable to create a reactive and SSR-friendly shared state across components.
 
-`useState` is a SSR-friendly [`ref`](https://v3.vuejs.org/api/refs-api.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
+`useState` is an SSR-friendly [`ref`](https://v3.vuejs.org/api/refs-api.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
 ## Signature
 
@@ -12,7 +12,7 @@ useState<T>(key: string, init?: () => T): Ref<T>
 
 * **key**: A unique key ensuring that data fetching can be properly de-duplicated across requests
 * **init**: A function that provides initial value for the state when it's not initiated
-* **T**: (typescript only) Specify type of state
+* **T**: (typescript only) Specify the type of state
 
 ::alert{icon=👉}
 `useState` only works during `setup` or [`Lifecycle Hooks`](https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks).
@@ -56,7 +56,7 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 
 ### Advanced
 
-In this example, we use a composable that detects the user's default locale from the request HTTP headers and keeps in `locale` state.
+In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a `locale` state.
 
 :button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/locale?terminal=dev" blank}
 

docs/content/3.docs/1.usage/3.meta-tags.md

@@ -4,7 +4,7 @@ You can customize the meta tags for your site through several different ways:
 
 ## `useMeta` Composable
 
-Within your `setup()` function you can call `useMeta` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
+Within your `setup` function, you can call `useMeta` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
 
 For example:
 
@@ -25,7 +25,7 @@ export default {
 
 ## Meta Components
 
-Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component template.
+Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
 
 Because these component names match native HTML elements, it is very important that they are capitalized in the template.
 

docs/content/3.docs/1.usage/4.nuxt-app.md

@@ -1,8 +1,8 @@
 # NuxtApp
 
-In Nuxt 3, you can access runtime app context within composables, components, and plugins.
+In Nuxt 3, you can access runtime app context within composables, components and plugins.
 
-In Nuxt 2, this was referred to as [nuxt context](https://nuxtjs.org/docs/internals-glossary/context#the-context)
+In Nuxt 2, this was referred to as [Nuxt context](https://nuxtjs.org/docs/internals-glossary/context#the-context).
 
 ## Accessing NuxtApp
 
@@ -20,12 +20,12 @@ function useMyComposable () {
 Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins.](/docs/directory-structure/plugins)
 
 ::alert{icon=👉}
-**`useNuxtApp` (on server side) only works during `setup`, inside Nuxt plugins or `Lifecycle Hooks`**
+**`useNuxtApp` (on server side) only works during `setup`, inside Nuxt plugins or `Lifecycle Hooks`**.
 ::
 
 ## Providing helpers
 
-You can provide helpers to be usable across all composables and application. This usually happens within a nuxt plugin.
+You can provide helpers to be usable across all composables and application. This usually happens within a Nuxt plugin.
 
 ```js
 const nuxtApp = useNuxtApp()
@@ -34,7 +34,7 @@ nuxtApp.provide('hello', (name) => `Hello ${name}!`)
 console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
 ```
 
-In Nuxt 2 plugins, this was referred to as [inject function](https://nuxtjs.org/docs/directory-structure/plugins#inject-in-root--context)
+In Nuxt 2 plugins, this was referred to as [inject function](https://nuxtjs.org/docs/directory-structure/plugins#inject-in-root--context).
 
 ::alert{icon=👉}
 It is possible to inject helpers by returning an object with a `provide` key. See the [plugins documentation](/docs/directory-structure/plugins) for more information.

docs/content/3.docs/1.usage/5.runtime-config.md

@@ -1,10 +1,10 @@
 # Runtime Config
 
-Nuxt provides a runtime config API to share within App and API routes.
+Nuxt provides an API to define the runtime config within your application and API routes.
 
 ## Exposing runtime config
 
-To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using either the [`publicRuntimeConfig` or `privateRuntimeConfig` options](/docs/directory-structure/nuxt.config#privateruntimeconfig). Based on whether you want it to be accessible on the client-side part of your app or not.
+To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using either the [`privateRuntimeConfig` or `publicRuntimeConfig` options](/docs/directory-structure/nuxt.config#privateruntimeconfig) (based on whether you want it to be accessible on the client-side part of your app or not).
 
 **Example:**
 
@@ -13,20 +13,20 @@ export default defineNuxtConfig({
   publicRuntimeConfig: {
     API_BASE: '/api'
   },
- privateRunimeConfig: {
+  privateRuntimeConfig: {
     API_SECRET: '123'
   }
 })
 ```
 
-When adding `API_BASE` to the `publicRuntimeConfig`, Nuxt adds it to the pages payload. This way we can universally access `API_BASE` in both server and browser.
+When adding `API_BASE` to the `publicRuntimeConfig`, Nuxt adds it to the pages' payload. This way we can universally access `API_BASE` in both server and browser.
 
 ### Environment Variables
 
-The most common way to provide configuration, is using [Environment Variables](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa).
+The most common way to provide configuration is by using [Environment Variables](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa).
 Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support.
 
-In addition to any process environment variables, if you have a `.env` file in your project root directory, it will be automatically loaded into `process.env` and accessible within your `nuxt.config` file and Modules.
+In addition to any process environment variables, if you have a `.env` file in your project root directory, it will be automatically loaded into `process.env` and accessible within your `nuxt.config` file and modules.
 
 **Example:**
 
@@ -56,8 +56,8 @@ Within the Vue part of your Nuxt app, you will need to call `useRuntimeConfig()`
 
 **Note:** Behavior is different between client side and server side:
 
-- On Client-Side, only `publicRuntimeConfig` is available and object is writable + reactive
+- On client side, only `publicRuntimeConfig` is available and the object is both writable and reactive.
-- On Server-Side, both `publicRuntimeConfig` and `privateRuntimeConfig` are merged and object is readonly to avoid context sharing
+- On server side, both `publicRuntimeConfig` and `privateRuntimeConfig` are merged and the object is read-only to avoid context sharing.
 
 ```vue
 <template>
@@ -71,10 +71,10 @@ const config = useRuntimeConfig()
 </script>
 ```
 
-**🛑 Security note:** Never use example above if `API_AUTH_TOKEN` is a private config. Even if you use `privateRuntimeConfig`, you have to be still careful you do not expose such config to either payload or html!
+**🛑 Security note:** Never use example above if `API_AUTH_TOKEN` is a private config. Even if you use `privateRuntimeConfig`, you still have to be careful that you do not expose such config to either payload or html!
 
 ::alert{icon=👉}
-**`useRuntimeConfig` only works during `setup` or `Lifecycle Hooks`**
+**`useRuntimeConfig` only works during `setup` or `Lifecycle Hooks`**.
 ::
 
 ### API routes

docs/content/3.docs/2.directory-structure/1.nuxt.md

@@ -7,10 +7,10 @@ head.title: Nuxt directory
 
 # Nuxt directory
 
-The `.nuxt` directory is used by Nuxt in development to generate your Vue application.
+The `.nuxt/` directory is used by Nuxt in development to generate your Vue application.
 
 ::alert{type=warning}
-You should not touch any files inside since the whole directory will be re-created when running `nuxt dev`
+You should not touch any files inside since the whole directory will be re-created when running `nuxt dev`.
 ::
 
 This directory is interesting if you want to learn more about the files Nuxt generates based on your directory structure.

docs/content/3.docs/2.directory-structure/10.plugins.md

@@ -6,7 +6,7 @@ head.title: Plugins directory
 
 # Plugins directory
 
-Nuxt will automatically read the files in your `plugins` directory and load them. You can use `.server` or `.client` in the file name to load a plugin just on server- or client-side.
+Nuxt will automatically read the files in your `plugins` directory and load them. You can use `.server` or `.client` suffix in the file name to load a plugin only on the server or client side.
 
 ::alert{type=warning}
 All plugins in your `plugins/` directory are auto-registered, so you should not add them to your `nuxt.config` separately.
@@ -60,7 +60,7 @@ const { $hello } = useNuxtApp()
 If you return your helpers from the plugin, they will be typed automatically; you'll find them typed for the return of `useNuxtApp()` and within your templates.
 
 ::alert
-If you need to use a provided helper _within_ another plugin, you can call `useNuxtApp()` to get the typed version. But in general this should be avoided unless you are certain of the plugins' order.
+If you need to use a provided helper _within_ another plugin, you can call `useNuxtApp()` to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
 ::
 
 ### Advanced
@@ -85,7 +85,7 @@ export { }
 
 ## Vue plugins
 
-If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriele/vue-gtag) to add Google analytics tags, you can use a nuxt plugin to do so.
+If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriele/vue-gtag) to add Google Analytics tags, you can use a Nuxt plugin to do so.
 
 > There is an Open RFC to make this even easier! See [nuxt/framework#1175](https://github.com/nuxt/framework/discussions/1175)
 

docs/content/3.docs/2.directory-structure/12.server.md

@@ -14,7 +14,7 @@ The `server/` directory contains API endpoints and server middleware for your
 
 Nuxt will automatically read in any files in the `~/server/api` directory to create API endpoints.
 
-Each file should export a default function that handles api requests. It can return a promise or JSON data directly (or use `res.end()`).
+Each file should export a default function that handles API requests. It can return a promise or JSON data directly (or use `res.end()`).
 
 ### Examples
 
@@ -24,7 +24,7 @@ Each file should export a default function that handles api requests. It can ret
 export default (req, res) => 'Hello World'
 ```
 
-See result on <http://localhost:3000/api/hello>
+See the result on <http://localhost:3000/api/hello>.
 
 #### Async function
 
@@ -53,7 +53,7 @@ export default async (req: IncomingMessage, res: ServerResponse) => {
 
 Nuxt will automatically read in any files in the `~/server/middleware` to create server middleware for your project.
 
-These files will be run on every request, unlike [API routes](./api) that are mapped to their own routes. This is typically so you can add a common header to all responses, log responses or modify the incoming request object for use later on in the request chain.
+These files will be run on every request, unlike [API routes](./api) that are mapped to their own routes. This is typically so you can add a common header to all responses, log responses or modify the incoming request object for later use in the request chain.
 
 Each file should export a default function that will handle a request.
 

docs/content/3.docs/2.directory-structure/13.gitignore.md

@@ -8,7 +8,7 @@ head.title: Gitignore file
 
 A `.gitignore` file specifies intentionally untracked files that git should ignore. Learn more about it in [the git documentation](https://git-scm.com/docs/gitignore).
 
-We recommend to have a `.gitignore` file which has **at least** the following lines present:
+We recommend having a `.gitignore` file that has **at least** the following entries present:
 
 ```bash [.gitignore]
 # Nuxt dev/build outputs

docs/content/3.docs/2.directory-structure/14.app.md

@@ -10,7 +10,7 @@ The `app.vue` file is the main component in your Nuxt 3 applications.
 
 ## Minimal usage
 
-With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional, if not present, Nuxt won't include [vue-router](https://next.router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing.
+With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://next.router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing.
 
 ```vue [app.vue]
 <template>
@@ -35,7 +35,7 @@ Since Nuxt 3 uses [`<Suspense>`](https://v3.vuejs.org/guide/migration/suspense.h
 ::
 
 ::alert{type=warning}
-Remember that `app.vue` acts as the main component of your Nuxt application, anything you add in it (JS and CSS) will be global and included in every page.
+Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add in it (JS and CSS) will be global and included in every page.
 ::
 
-If you want to have the possibility to customize the structure around the page between pages, checkout the [`layouts/`](/docs/directory-structure/layouts). directory
+If you want to have the possibility to customize the structure around the page between pages, check out the [`layouts/`](/docs/directory-structure/layouts) directory.

docs/content/3.docs/2.directory-structure/2.output.md

@@ -9,7 +9,7 @@ head.title: Output directory
 The `.output/` directory is created by Nuxt when building your application for production.
 
 ::alert{type=warning}
-You should not touch any files inside since the whole directory will be re-created when running `nuxt build`
+You should not touch any files inside since the whole directory will be re-created when running `nuxt build`.
 ::
 
 This directory is made to be used when deploying your Nuxt application to production. Learn more in our [deployment section](/docs/deployment).

docs/content/3.docs/2.directory-structure/3.assets.md

@@ -8,10 +8,10 @@ head.title: Assets directory
 
 The `assets/` directory is used to add all the website assets that will be processed by the build tool (Webpack or Vite).
 
-The directory usually contain such files:
+The directory usually contains the following types of files:
 
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
 - Images that won't be served from the [`public/`](/docs/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend to take a look at the [`public/`](/docs/directory-structure/public) directory.
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/directory-structure/public) directory.

docs/content/3.docs/2.directory-structure/4.components.md

@@ -28,7 +28,7 @@ Nuxt automatically imports any components in your `components/` directory (along
 
 ## Component Names
 
-If you have components in nested directories such as:
+If you have a component in nested directories such as:
 
 ```bash
 | components/
@@ -37,19 +37,19 @@ If you have components in nested directories such as:
 ------| Button.vue
 ```
 
-The component name will be based on its own path directory and filename, with duplicate segments being removed. Therefore, the component will be:
+... then the component's name will be based on its own path directory and filename, with duplicate segments being removed. Therefore, the component's name will be:
 
 ```html
 <BaseFooButton />
 ```
 
 ::alert
-For clarity, it is recommended that the component file name matches its name. (So, in the example above, you could rename `Button.vue` to be `BaseFooButton.vue`.)
+For clarity, it is recommended that the component's file name matches its name. (So, in the example above, you could rename `Button.vue` to be `BaseFooButton.vue`.)
 ::
 
 ## Dynamic Imports
 
-To dynamically import a component (also known as lazy-loading a component) all you need to do is add the `Lazy` prefix to the component name.
+To dynamically import a component (also known as lazy-loading a component) all you need to do is add the `Lazy` prefix to the component's name.
 
 ```html{}[layouts/default.vue]
 <template>
@@ -85,7 +85,7 @@ export default {
 
 ## `<ClientOnly>` Component
 
-Nuxt provides the `<ClientOnly>` component for purposely rendering a component only on client-side. To import a component only on the client, register the component in a client-side only plugin.
+Nuxt provides the `<ClientOnly>` component for purposely rendering a component only on client side. To import a component only on the client, register the component in a client-side only plugin.
 
 ```html{}[pages/example.vue]
 <template>
@@ -99,17 +99,17 @@ Nuxt provides the `<ClientOnly>` component for purposely rendering a component o
 </template>
 ```
 
-Use a slot as fallback until `<ClientOnly>` is mounted on client-side.
+Use a slot as fallback until `<ClientOnly>` is mounted on client side.
 
 ```html{}[pages/example.vue]
 <template>
   <div>
     <Sidebar />
     <ClientOnly>
-      <!-- this component will only be rendered on client-side -->
+      <!-- this component will only be rendered on client side -->
       <Comments />
       <template #fallback>
-        <!-- this will be rendered on server-side -->
+        <!-- this will be rendered on server side -->
         <p>Loading comments...</p>
       </template>
     </ClientOnly>
@@ -156,7 +156,7 @@ export default defineNuxtModule({
 })
 ```
 
-That's it! Now in your project, you can import your ui library as a Nuxt module in your `nuxt.config.js`:
+That's it! Now in your project, you can import your ui library as a Nuxt module in your `nuxt.config` file:
 
 ```js
 export default {
@@ -164,7 +164,7 @@ export default {
 }
 ```
 
-And directly use the module components (prefixed with `awesome-`), our `pages/index.vue`:
+... and directly use the module components (prefixed with `awesome-`) in our `pages/index.vue`:
 
 ```vue
 <template>

docs/content/3.docs/2.directory-structure/5.composables.md

@@ -6,9 +6,9 @@ head.title: Composables directory
 
 # Composables directory
 
-Nuxt 3 supports `composables/` directory to auto import your Vue composables into your application using auto imports!
+Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using auto-imports!
 
-Example: (using named exports)
+Example: (using named export)
 
 ```js [composables/useFoo.ts]
 import { useState } from '#app'
@@ -29,7 +29,7 @@ export default function () {
 }
 ```
 
-You can now auto import it:
+You can now auto-import it:
 
 ```vue [app.vue]
 <template>

docs/content/3.docs/2.directory-structure/6.layouts.md

@@ -8,9 +8,9 @@ head.title: Layouts directory
 
 Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components.
 
-Page layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. If you create a `layouts/default.vue` this will be used for all pages in your app. Other layouts are used by setting a `layout` property as part of your component options.
+Page layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. If you create a `layouts/default.vue` this will be used for all pages in your app. Other layouts are used by setting a `layout` property as part of your component's options.
 
-If you have only single layout for application, you can alternatively use [app.vue](/docs/directory-structure/app).
+If you only have a single layout in your application, you can alternatively use [app.vue](/docs/directory-structure/app).
 
 ## Example: a custom layout
 

docs/content/3.docs/2.directory-structure/8.modules.md

@@ -7,7 +7,7 @@ head.title: Local modules directory
 
 # Local modules directory
 
-Nuxt has a powerful modules engine
+Nuxt has a powerful modules engine.
 
 # Creating Modules
 

docs/content/3.docs/2.directory-structure/9.pages.md

@@ -7,7 +7,7 @@ head.title: Pages directory
 # Pages directory
 
 ::alert{type="info"}
-The `pages/` directory is optional, meaning that if you only use [app.vue](/docs/directory-structure/app), `vue-router` won't be included, reducing your application bundle size.
+The `pages/` directory is optional, meaning that if you only use [app.vue](/docs/directory-structure/app), `vue-router` won't be included, reducing your application's bundle size.
 ::
 
 Nuxt will automatically integrate [Vue Router](https://next.router.vuejs.org/) and map `pages/` directory into the routes of your application.
@@ -48,7 +48,7 @@ admins 123
 
 ## Navigation
 
-To navigate between pages of your app, you should use the  `<NuxtLink>` component. This component is included with Nuxt and therefore you don't have to import it like you do with other components. It is similar to the HTML `<a>` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `<NuxtLink>` as a replacement of `<RouterLink>`
+To navigate between pages of your app, you should use the  `<NuxtLink>` component. This component is included with Nuxt and therefore you don't have to import it as you do with other components. It is similar to the HTML `<a>` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `<NuxtLink>` as a replacement for `<RouterLink>`.
 
 A simple link to the `index.vue` page in your `pages` folder:
 

docs/content/3.docs/3.deployment/1.azure.md

@@ -115,7 +115,7 @@ jobs:
 
 ### Optimizing Azure Functions
 
-Consider [turning on immutable packages](https://docs.microsoft.com/en-us/azure/app-service/deploy-run-package) to support running your app from the zipfile. This can speed up cold starts.
+Consider [turning on immutable packages](https://docs.microsoft.com/en-us/azure/app-service/deploy-run-package) to support running your app from the zip file. This can speed up cold starts.
 
 ### Demo
 

docs/content/3.docs/3.deployment/2.cloudflare.md

@@ -133,4 +133,4 @@ See [more information on the service worker preset](/docs/deployment/presets/ser
 
 ## Demo
 
-A live demo is available on <https://nitro-demo.nuxt.workers.dev/>
+A live demo is available on <https://nitro-demo.nuxt.workers.dev/>.

docs/content/3.docs/3.deployment/3.firebase.md

@@ -16,7 +16,7 @@ How to deploy Nuxt to Firebase Hosting.
 
 Nitro supports [Firebase Hosting](https://firebase.google.com/docs/hosting) with Cloud Functions out of the box.
 
-**Note**: You will need to be on the **Blaze plan** in order to use Nitro with Cloud Functions.
+**Note**: You will need to be on the **Blaze plan** to use Nitro with Cloud Functions.
 
 ### Using Nitro
 
@@ -48,9 +48,9 @@ npm install -D firebase-admin firebase-functions firebase-functions-test
 
 ### Using Firebase CLI
 
-You may instead prefer to set up your project with the `firebase` CLI, which will fetch your project ID for you, add required dependencies (see above) and even set up automated deployments via GitHub Actions.
+You may instead prefer to set up your project with the Firebase CLI, which will fetch your project ID for you, add required dependencies (see above) and even set up automated deployments via GitHub Actions.
 
-#### Install firebase CLI globally
+#### Install Firebase CLI globally
 
 ::code-group
 
@@ -64,14 +64,14 @@ npm install -g firebase-tools
 
 ::
 
-#### Initialize your firebase project
+#### Initialize your Firebase project
 
 ```bash
 firebase login
 firebase init hosting
 ```
 
-When prompted, you can enter `.output/public` as the public directory. **Don't** select that this will be a single-page app.
+When prompted, you can enter `.output/public` as the public directory. In the next step, **do not** configure your project as a single-page app.
 
 Once complete, add the following to your `firebase.json` to enable server rendering in Cloud Functions:
 
@@ -111,4 +111,4 @@ firebase deploy
 
 ## Demo site
 
-A live demo is available on <https://nitro-demo-dfabe.web.app>
+A live demo is available on <https://nitro-demo-dfabe.web.app>.

docs/content/3.docs/3.deployment/4.netlify.md

@@ -19,7 +19,7 @@ Nitro will auto-detect that you are in a [Netlify](https://www.netlify.com) envi
 
 ## Deployment
 
-Just push to your git repository [as you would normally for Netlify](https://docs.netlify.com/configure-builds/get-started/).
+Just push to your git repository [as you would normally do for Netlify](https://docs.netlify.com/configure-builds/get-started/).
 
 ## More information
 
@@ -27,4 +27,4 @@ See [more information on the Lambda preset](/docs/deployment/presets/lambda) for
 
 ## Demo
 
-A live demo is available on <https://nitro-demo.netlify.app/>
+A live demo is available on <https://nitro-demo.netlify.app/>.

docs/content/3.docs/3.deployment/5.pm2.md

@@ -28,7 +28,7 @@ export default {
 
 ## Deployment
 
-After running `yarn build`, all you need is in the `.output` folder. Static assets are in the `public` subdirectory and the server and its dependencies are within the `server` subdirectory.
+After running `yarn build`, all the required files are located in the `.output` folder. Static assets are in the `public` subdirectory and the server with its dependencies are within the `server` subdirectory.
 
 This `.output` folder can be deployed to your Node.js host and the server can be run using [`pm2`](https://pm2.keymetrics.io/docs/).
 

docs/content/3.docs/3.deployment/6.vercel.md

@@ -19,7 +19,7 @@ By default, [Vercel](https://vercel.com) will run your `build` script in the `pa
 
 ## Deployment
 
-Just push to your git repository [as you would normally for Vercel](https://vercel.com/docs/git).
+Just push to your git repository [as you would normally do for Vercel](https://vercel.com/docs/git).
 
 ## More information
 
@@ -27,4 +27,4 @@ See [more information on the node preset](/docs/deployment/presets/node) for ful
 
 ## Demo
 
-A live demo is available at <https://nitro-demo.vercel.app/>
+A live demo is available at <https://nitro-demo.vercel.app/>.

docs/content/3.docs/3.deployment/99.presets.md

@@ -4,7 +4,7 @@ icon: IconPresets
 
 # Presets
 
-Nuxt has four provided generic presets that you can use out-of-the-box.
+Nuxt provides four generic presets that you can use out-of-the-box.
 
 ::list{type=success}
 

docs/content/3.docs/3.deployment/99.presets/custom.md

@@ -14,7 +14,7 @@ Back to [presets list](/docs/deployment/presets).
 
 ## Setup
 
-You can create your own custom build preset. See [the provided presets](https://github.com/nuxt/framework/blob/main/packages/nitro/src/presets) for examples.
+You can create your own custom-built preset. See [the provided presets](https://github.com/nuxt/framework/blob/main/packages/nitro/src/presets) for examples.
 
 ### Inline preset definition
 

docs/content/3.docs/3.deployment/99.presets/lambda.md

@@ -8,7 +8,7 @@ Back to [presets list](/docs/deployment/presets).
 
 ## Usage
 
-You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
+You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
 
 ```ts [nuxt.config.js|ts]
 export default {
@@ -26,11 +26,11 @@ NITRO_PRESET=lambda npx nuxt build
 
 ### Entrypoint
 
-When running `nuxt build` with the Lambda preset, the result will be an entrypoint that exports a handler function that responds to an event and returns a response.
+When running `nuxt build` with the Lambda preset, the result will be an entry point that exports a handler function that responds to an event and returns a response.
 
-This entrypoint is compatible with [AWS Lambda](https://docs.aws.amazon.com/lex/latest/dg/lambda-input-response-format.html) and [Netlify Functions](https://docs.netlify.com/functions/build-with-javascript).
+This entry point is compatible with [AWS Lambda](https://docs.aws.amazon.com/lex/latest/dg/lambda-input-response-format.html) and [Netlify Functions](https://docs.netlify.com/functions/build-with-javascript).
 
-It can be used programmatically or as part of a deploy.
+It can be used programmatically or as part of a deployment.
 
 ```ts
 import { handler } from './.output/server'

docs/content/3.docs/3.deployment/99.presets/node.md

@@ -5,7 +5,7 @@ Discover the Node.js function preset with Nitro to attach Nuxt as a middleware t
 ::list
 
 - Compatible with many Node.js servers
-- Drop-in usage with express or native http server
+- Drop-in usage with express or native HTTP server
 - Loads only the chunks required to render the request for optimal cold start timing
 ::
 

docs/content/3.docs/3.deployment/99.presets/server.md

@@ -48,7 +48,7 @@ Listening on http://localhost:3000
 
 ## Server timings
 
-You can enable the `nitro.timing` option in order to have the logs about the chunk loading and cold start performance.
+You can enable the `nitro.timing` option to have the logs about the chunk loading and cold start performance.
 
 ```js [nuxt.config.js|ts]
 export default {

docs/content/4.community/1.getting-help.md

@@ -1,6 +1,6 @@
 # Getting Help
 
-At some point you may find that there's an issue you need some help with. But don't worry! We're a friendly community of developers and we'd love to help.
+At some point, you may find that there's an issue you need some help with. But don't worry! We're a friendly community of developers and we'd love to help.
 
 ## "I can't figure out how to __."
 
@@ -24,4 +24,4 @@ And finally, just ask the question! There's no need to [ask permission to ask a
 
 Something isn't working the way that the docs say that it should. You're not sure if it's a bug. You've searched through the [open issues](https://github.com/nuxt/framework/issues) and [discussions](https://github.com/nuxt/framework/discussions) but you can't find anything. (if there is a closed issue, please create a new one)
 
-We recommend to take a look at [how to report bugs](/community/reporting-bugs). Nuxt 3 is still in active development, and every issue helps make it better.
+We recommend taking a look at [how to report bugs](/community/reporting-bugs). Nuxt 3 is still in active development, and every issue helps make it better.

docs/content/4.community/2.reporting-bugs.md

@@ -1,6 +1,6 @@
 # Reporting Bugs
 
-Try as we might, we never completely eliminate bugs. One of the most valuable roles in open source is taking the time to report bugs helpfully. Even if you can't fix the underlying code, reporting a bug well can enable someone else with a bit more familiarity with the code base to spot a pattern or make a quick fix.
+Try as we might, we never completely eliminate bugs. One of the most valuable roles in open source is taking the time to report bugs helpfully. Even if you can't fix the underlying code, reporting a bug well can enable someone else with a bit more familiarity with the codebase to spot a pattern or make a quick fix.
 
 Here are a few key steps.
 

docs/content/4.community/3.contribution.md

@@ -2,7 +2,7 @@
 
 Nuxt is a community project - and so we love contributions of all kinds! ❤️
 
-There are a range of different ways you might be able to contribute to the Nuxt ecosystem.
+There is a range of different ways you might be able to contribute to the Nuxt ecosystem.
 
 ## Improve our documentation
 
@@ -18,7 +18,7 @@ Check out [our issues board](https://github.com/nuxt/framework/issues) and [disc
 
 Before you fix a bug or add a feature, ensure there's an issue that describes it. Particularly for new features, this is a great opportunity for the project leads to give feedback before starting work on it.
 
-### Setup your dev environment
+### Set up your dev environment
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) the [Nuxt 3 repository](https://github.com/nuxt/framework) to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 
@@ -46,7 +46,7 @@ Before creating a PR or marking it as ready-to-review, make sure that all tests
 
 ### Linting
 
-As you might have noticed already, we use ESLint to enforce a code standard. Please run `yarn lint` before committing your changes to verify that the code style is correct. If not, you can use `yarn lint --fix` to fix most of the style changes. If there are still errors left, you must correct them manually.
+As you might have noticed already, we use ESLint to enforce a coding standard. Please run `yarn lint` before committing your changes to verify that the code style is correct. If not, you can use `yarn lint --fix` to fix most of the style changes. If there are still errors left, you must correct them manually.
 
 ### Documentation