diff --git a/docs/content/1.getting-started/10.deployment.md b/docs/content/1.getting-started/10.deployment.md
index d7f2af80792..66845b5845c 100644
--- a/docs/content/1.getting-started/10.deployment.md
+++ b/docs/content/1.getting-started/10.deployment.md
@@ -137,15 +137,15 @@ NITRO_PRESET=node-server nuxt build
 
 Nuxt 3 can be deployed to several cloud providers with a minimal amount of configuration:
 
-- :IconCloud{class="h-5 w-4 inline mb-2"} [AWS](https://nitro.unjs.io/deploy/providers/aws)
-- :LogoAzure{class="h-5 w-4 inline mb-2"} [Azure](https://nitro.unjs.io/deploy/providers/azure)
-- :IconCloud{class="h-5 w-4 inline mb-2"} [Cleavr](https://nitro.unjs.io/deploy/providers/cleavr)
-- :LogoCloudFlare{class="h-5 w-4 inline mb-2"} [CloudFlare](https://nitro.unjs.io/deploy/providers/cloudflare)
-- :IconCloud{class="h-5 w-4 inline mb-2"} [Digital Ocean](https://nitro.unjs.io/deploy/providers/digitalocean)
-- :LogoFirebase{class="h-5 w-4 inline mb-2"} [Firebase](https://nitro.unjs.io/deploy/providers/firebase)
-- :IconCloud{class="h-5 w-4 inline mb-2"} [heroku](https://nitro.unjs.io/deploy/providers/heroku)
-- :IconCloud{class="h-5 w-4 inline mb-2"} [layer0](https://nitro.unjs.io/deploy/providers/layer0)
-- :LogoNetlify{class="h-5 w-4 inline mb-2"} [Netlify](https://nitro.unjs.io/deploy/providers/netlify)
-- :IconCloud{class="h-5 w-4 inline mb-2"} [Render](https://nitro.unjs.io/deploy/providers/render)
-- :IconCloud{class="h-5 w-4 inline mb-2"} [Stormkit](https://nitro.unjs.io/deploy/providers/stormkit)
-- :LogoVercel{class="h-5 w-4 inline mb-2"} [Vercel](https://nitro.unjs.io/deploy/providers/vercel)
+- :icon{name="logos:aws" class="h-5 w-4 inline mb-2"} [AWS](https://nitro.unjs.io/deploy/providers/aws)
+- :icon{name="logos:microsoft-azure" class="h-5 w-4 inline mb-2"} [Azure](https://nitro.unjs.io/deploy/providers/azure)
+- :icon{name="ph:cloud-duotone" class="h-5 w-4 inline mb-2"} [Cleavr](https://nitro.unjs.io/deploy/providers/cleavr)
+- :icon{name="logos:cloudflare" class="h-5 w-4 inline mb-2"} [CloudFlare](https://nitro.unjs.io/deploy/providers/cloudflare)
+- :icon{name="logos:digital-ocean" class="h-5 w-4 inline mb-2"} [Digital Ocean](https://nitro.unjs.io/deploy/providers/digitalocean)
+- :icon{name="logos:firebase" class="h-5 w-4 inline mb-2"} [Firebase](https://nitro.unjs.io/deploy/providers/firebase)
+- :icon{name="logos:heroku-icon" class="h-5 w-4 inline mb-2"} [heroku](https://nitro.unjs.io/deploy/providers/heroku)
+- :icon{name="ph:cloud-duotone" class="h-5 w-4 inline mb-2"} [layer0](https://nitro.unjs.io/deploy/providers/layer0)
+- :icon{name="logos:netlify" class="h-5 w-4 inline mb-2"} [Netlify](https://nitro.unjs.io/deploy/providers/netlify)
+- :icon{name="simple-icons:render" class="h-5 w-4 inline mb-2"} [Render](https://nitro.unjs.io/deploy/providers/render)
+- :icon{name="ph:cloud-duotone" class="h-5 w-4 inline mb-2"} [Stormkit](https://nitro.unjs.io/deploy/providers/stormkit)
+- :icon{name="logos:vercel-icon" class="h-5 w-4 inline mb-2"} [Vercel](https://nitro.unjs.io/deploy/providers/vercel)
diff --git a/docs/content/2.guide/2.directory-structure/1.composables.md b/docs/content/2.guide/2.directory-structure/1.composables.md
index ee087f4481f..a72160895d2 100644
--- a/docs/content/2.guide/2.directory-structure/1.composables.md
+++ b/docs/content/2.guide/2.directory-structure/1.composables.md
@@ -11,7 +11,7 @@ Nuxt 3 uses the `composables/` directory to automatically import your Vue compos
 
 Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
 
-Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generates the types. If you create a composable without having the dev server running, typescript will throw an error `Cannot find name 'useBar'.`
+Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generate the types. If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.`
 
 ## Usage
 
diff --git a/docs/content/2.guide/2.directory-structure/1.utils.md b/docs/content/2.guide/2.directory-structure/1.utils.md
new file mode 100644
index 00000000000..d73223b457a
--- /dev/null
+++ b/docs/content/2.guide/2.directory-structure/1.utils.md
@@ -0,0 +1,16 @@
+---
+navigation.icon: IconDirectory
+title: 'utils'
+head.title: Utils
+description: Use the utils/ directory to auto-import your utility functions throughout your application.
+---
+
+# Utils Directory
+
+Nuxt 3 uses the `utils/` directory to automatically import helper functions and other utilities throughout your application using [auto-imports](/guide/concepts/auto-imports)!
+
+::alert{type=info}
+The main purpose of the `utils/` directory is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
+
+The way `utils/` auto-imports work and are scanned is identical to [the composables/ directory](/guide/directory-structure/composables). You can see examples and more information about how they work in that section of the docs.
+::
diff --git a/docs/content/3.api/1.composables/use-request-headers.md b/docs/content/3.api/1.composables/use-request-headers.md
index 90115ece837..4b928a8fa21 100644
--- a/docs/content/3.api/1.composables/use-request-headers.md
+++ b/docs/content/3.api/1.composables/use-request-headers.md
@@ -5,7 +5,7 @@ description: "Use useRequestHeaders to access the incoming request headers."
 
 # `useRequestHeaders`
 
-Within your pages, components, and plugins you can use `useRequestHeaders` to access the incoming request headers.
+You can use built-in `useRequestHeaders` composable to access the incoming request headers within your pages, components, and plugins.
 
 ```js
 // Get all request headers
@@ -18,3 +18,21 @@ const headers = useRequestHeaders(['cookie'])
 ::alert{icon=👉}
 In the browser, `useRequestHeaders` will return an empty object.
 ::
+
+## Example
+
+We can use `useRequestHeaders` to access and proxy the initial request's `authorization` header to any future internal requests during SSR.
+
+The example below adds the `authorization` request header to an isomorphic `$fetch` call.
+
+```vue [pages/some-page.vue]
+<script setup>
+const { data } = await useFetch('/api/confidential', {
+  headers: useRequestHeaders(['authorization'])
+})
+</script>
+```
+
+::alert{icon=👉}
+[Another example](/getting-started/data-fetching#example-pass-client-headers-to-the-api) shows how we can pass cookies from the initial request to another API route.
+::
diff --git a/docs/content/3.api/3.utils/refresh-nuxt-data.md b/docs/content/3.api/3.utils/refresh-nuxt-data.md
index 6e1bd435a0e..35387d05ee6 100644
--- a/docs/content/3.api/3.utils/refresh-nuxt-data.md
+++ b/docs/content/3.api/3.utils/refresh-nuxt-data.md
@@ -5,15 +5,67 @@ description: refreshNuxtData refetches all data from the server and updates the
 
 # `refreshNuxtData`
 
-`refreshNuxtData` refetches all data from the server and updates the page.
+`refreshNuxtData` re-fetches all data from the server and updates the page as well as invalidates the cache of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useLazyFetch`.
 
-::ReadMore{link="/getting-started/data-fetching"}
-::
+## Type
 
 ```ts
 refreshNuxtData(keys?: string | string[])
 ```
 
-Available options:
+**Parameters:**
+
+* `keys`:
+
+    **Type**: `String | String[]`
+
+    `refreshNuxtData` accepts a single or an array of strings as `keys` that are used to fetch the data. This parameter is **optional**. All `useAsyncData` and `useFetch` are re-fetched when no `keys` are specified.
+
+## Examples
+
+### Refresh All data
+
+This example below refreshes all data being fetched using `useAsyncData` and `useFetch` on the current page.
+
+```vue [pages/some-page.vue]
+<template>
+  <div>
+    <button :disabled="refreshing" @click="refreshAll">
+      Refetch All Data
+    </button>
+  </div>
+</template>
+
+<script setup>
+const refreshing = ref(false)
+const refreshAll = async () => {
+  refreshing.value = true
+  try {
+    await refreshNuxtData()
+  } finally {
+    refreshing.value = false
+  }
+}
+</script>
+```
+
+### Refresh Specific Data
+
+This example below refreshes only data where the key matches to `count`.
+
+```vue [pages/some-page.vue]
+<template>
+  <div>
+    {{ pending ? 'Loading' : count }}
+  </div>
+  <button @click="refresh">Refresh</button>
+</template>
 
-* `keys`: Provides an array of keys that are used in `useAsyncData` to refetch. When it's not specified, all `useAsyncData` and `useFetch` will be refetched.
+<script setup>
+const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+const refresh = () => refreshNuxtData('count')
+</script>
+```
+
+::ReadMore{link="/getting-started/data-fetching"}
+::
diff --git a/docs/content/3.api/4.advanced/2.kit.md b/docs/content/3.api/4.advanced/2.kit.md
index 59132a038a4..66fbcdeea7b 100644
--- a/docs/content/3.api/4.advanced/2.kit.md
+++ b/docs/content/3.api/4.advanced/2.kit.md
@@ -56,6 +56,12 @@ description: Nuxt Kit provides composable utilities to help interacting with Nux
 
 - `useNuxt()`
 
+### Pages
+
+[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/pages.ts)
+
+- `extendPages (callback: pages => void)`
+
 ### Plugins
 
 [source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/plugin.ts)
diff --git a/docs/content/4.examples/0.essentials/hello-world.md b/docs/content/4.examples/0.essentials/hello-world.md
index 69586e6201f..c225b96a973 100644
--- a/docs/content/4.examples/0.essentials/hello-world.md
+++ b/docs/content/4.examples/0.essentials/hello-world.md
@@ -1,9 +1,9 @@
 ---
-title: "Hello World"
-description: "A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files."
 toc: false
 ---
 
+# Hello World
+
 A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
 
 ::ReadMore{link="/getting-started/introduction"}
diff --git a/docs/content/4.examples/1.app/app-config.md b/docs/content/4.examples/1.app/app-config.md
index 527ddf5555e..374f381edf9 100644
--- a/docs/content/4.examples/1.app/app-config.md
+++ b/docs/content/4.examples/1.app/app-config.md
@@ -1,5 +1,5 @@
 ---
-template: Example
+toc: false
 ---
 
 # `app.config`
diff --git a/docs/content/4.examples/1.app/error-handling.md b/docs/content/4.examples/1.app/error-handling.md
index 9488e6a23b4..c4036f262b8 100644
--- a/docs/content/4.examples/1.app/error-handling.md
+++ b/docs/content/4.examples/1.app/error-handling.md
@@ -1,6 +1,4 @@
 ---
-title: "Error Handling"
-description: "This example shows how to handle errors in different contexts: pages, plugins, components and middleware."
 toc: false
 ---
 
@@ -8,7 +6,7 @@ toc: false
 
 This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
 
-::ReadMore{link="/getting-started/error-handling"}
+:ReadMore{link="/getting-started/error-handling"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/error-handling" file="app.vue"}
diff --git a/docs/content/4.examples/1.app/plugins.md b/docs/content/4.examples/1.app/plugins.md
index 6f69ab876d0..33176a97012 100644
--- a/docs/content/4.examples/1.app/plugins.md
+++ b/docs/content/4.examples/1.app/plugins.md
@@ -1,10 +1,12 @@
 ---
-title: "Plugins"
-description: "This example shows how to use the plugins/ directory to auto-register plugins."
 toc: false
 ---
 
-::ReadMore{link="/guide/directory-structure/plugins"}
+# Plugins
+
+This example shows how to use the plugins/ directory to auto-register plugins.
+
+:ReadMore{link="/guide/directory-structure/plugins"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/plugins" file="app.vue"}
diff --git a/docs/content/4.examples/1.app/teleport.md b/docs/content/4.examples/1.app/teleport.md
index 274ac11847a..30cd4bd7a8f 100644
--- a/docs/content/4.examples/1.app/teleport.md
+++ b/docs/content/4.examples/1.app/teleport.md
@@ -1,9 +1,11 @@
 ---
-title: "Teleport"
-description: "This example shows how to use the <Teleport> with client-side and server-side rendering."
 toc: false
 ---
 
+# Teleport
+
+This example shows how to use the <Teleport> with client-side and server-side rendering.
+
 Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/teleport.html) which allows content to be rendered elsewhere in the DOM, outside of the Vue application.
 
 This example shows how to use the `<Teleport>` with client-side and server-side rendering.
diff --git a/docs/content/4.examples/2.auto-imports/components.md b/docs/content/4.examples/2.auto-imports/components.md
index 1f881164df7..991dcb6523c 100644
--- a/docs/content/4.examples/2.auto-imports/components.md
+++ b/docs/content/4.examples/2.auto-imports/components.md
@@ -1,10 +1,10 @@
 ---
-title: "Components"
-description: "You can configure other directories to support components auto-imports."
 toc: false
 ---
 
-Components in the `components/` directory are auto-imported and can be used directly in your templates.
+# Components
+
+Components in the `components/` directory are auto-imported and can be used directly in your templates. You can configure other directories to support components auto-imports.
 
 ::ReadMore{link="/guide/directory-structure/components"}
 ::
diff --git a/docs/content/4.examples/2.auto-imports/composables.md b/docs/content/4.examples/2.auto-imports/composables.md
index babd706eb05..a57a47bcdcb 100644
--- a/docs/content/4.examples/2.auto-imports/composables.md
+++ b/docs/content/4.examples/2.auto-imports/composables.md
@@ -1,10 +1,12 @@
 ---
-title: "Composables"
-description: "This example shows how to use the composables/ directory to auto-import composables."
 toc: false
 ---
 
-If the component file provides a default export, the name of the composable will be mapped to the name of the file. Named exports can be used as-is.
+# Composables
+
+This example shows how to use the composables/ directory to auto-import composables.
+
+If the composable file provides a default export, the name of the composable will be mapped to the name of the file. Named exports can be used as-is.
 
 ::ReadMore{link="/guide/directory-structure/composables"}
 ::
diff --git a/docs/content/4.examples/3.composables/use-async-data.md b/docs/content/4.examples/3.composables/use-async-data.md
index 9a98adc2373..2410b161d16 100644
--- a/docs/content/4.examples/3.composables/use-async-data.md
+++ b/docs/content/4.examples/3.composables/use-async-data.md
@@ -1,9 +1,11 @@
 ---
-title: "useAsyncData"
-description: "This example shows how to use useAsyncData to fetch data from an API endpoint."
 toc: false
 ---
 
+# useAsyncData
+
+This example shows how to use useAsyncData to fetch data from an API endpoint.
+
 ::alert{type=info icon=💡}
 Nuxt will automatically read files in the `~/server/api` directory to create API endpoints.
 ::
diff --git a/docs/content/4.examples/3.composables/use-cookie.md b/docs/content/4.examples/3.composables/use-cookie.md
index 8d3ffc8f14e..1598ec1349f 100644
--- a/docs/content/4.examples/3.composables/use-cookie.md
+++ b/docs/content/4.examples/3.composables/use-cookie.md
@@ -1,9 +1,11 @@
 ---
-title: "useCookie"
-description: "This example shows how to use the useCookie API to persist small amounts of data that both client and server can use."
 toc: false
 ---
 
+# useCookie
+
+This example shows how to use the useCookie API to persist small amounts of data that both client and server can use.
+
 ::ReadMore{link="/api/composables/use-cookie"}
 ::
 
diff --git a/docs/content/4.examples/3.composables/use-fetch.md b/docs/content/4.examples/3.composables/use-fetch.md
index 3bdfede2eb1..acebd0cc444 100644
--- a/docs/content/4.examples/3.composables/use-fetch.md
+++ b/docs/content/4.examples/3.composables/use-fetch.md
@@ -1,9 +1,11 @@
 ---
-title: "useFetch"
-description: "This example shows how to use useFetch to fetch data from an API endpoint."
 toc: false
 ---
 
+# useFetch
+
+This example shows how to use useFetch to fetch data from an API endpoint.
+
 ::alert{type=info icon=💡}
 Nuxt will automatically read files in the `~/server/api` directory to create API endpoints.
 ::
diff --git a/docs/content/4.examples/3.composables/use-head.md b/docs/content/4.examples/3.composables/use-head.md
index 6251ed68ca9..e516220a318 100644
--- a/docs/content/4.examples/3.composables/use-head.md
+++ b/docs/content/4.examples/3.composables/use-head.md
@@ -1,9 +1,11 @@
 ---
 toc: false
-description: "This example shows how to use useHead and Nuxt built-in components to bind meta data to the head of the page."
-title: "useHead"
 ---
 
+# useHead
+
+This example shows how to use useHead and Nuxt built-in components to bind meta data to the head of the page.
+
 ::ReadMore{link="/api/composables/use-head"}
 ::
 
diff --git a/docs/content/4.examples/3.composables/use-state.md b/docs/content/4.examples/3.composables/use-state.md
index 2bbb42ec340..637fff22e4a 100644
--- a/docs/content/4.examples/3.composables/use-state.md
+++ b/docs/content/4.examples/3.composables/use-state.md
@@ -1,9 +1,11 @@
 ---
-title: "useState"
-description: "useState is an SSR-friendly ref replacement."
 toc: false
 ---
 
+# useState
+
+This example showcase the `useState` composable, an SSR-friendly ref replacement.
+
 Its value will be preserved after server-side rendering and shared across all components using a unique key.
 
 ::alert{type=info icon=👉}
diff --git a/docs/content/4.examples/4.routing/layouts.md b/docs/content/4.examples/4.routing/layouts.md
index fc4c715b918..9f072e4bc58 100644
--- a/docs/content/4.examples/4.routing/layouts.md
+++ b/docs/content/4.examples/4.routing/layouts.md
@@ -1,9 +1,11 @@
 ---
-title: "Layouts"
-description: "This example shows how to define default and custom layouts."
 toc: false
 ---
 
+# Layouts
+
+This example shows how to define default and custom layouts.
+
 ::ReadMore{link="/guide/directory-structure/layouts"}
 ::
 
diff --git a/docs/content/4.examples/4.routing/middleware.md b/docs/content/4.examples/4.routing/middleware.md
index 863f19edd6a..51365bca169 100644
--- a/docs/content/4.examples/4.routing/middleware.md
+++ b/docs/content/4.examples/4.routing/middleware.md
@@ -1,9 +1,11 @@
 ---
-title: "Middleware"
-description: "This example shows how to add route middleware with the middleware/ directory or with a plugin, and how to use them globally or per page."
 toc: false
 ---
 
+# Middleware
+
+This example shows how to add route middleware with the middleware/ directory or with a plugin, and how to use them globally or per page.
+
 ::ReadMore{link="/guide/directory-structure/middleware"}
 ::
 
diff --git a/docs/content/4.examples/4.routing/nuxt-link.md b/docs/content/4.examples/4.routing/nuxt-link.md
index a4c7f0e5b21..efdb896f751 100644
--- a/docs/content/4.examples/4.routing/nuxt-link.md
+++ b/docs/content/4.examples/4.routing/nuxt-link.md
@@ -1,9 +1,11 @@
 ---
-title: "<NuxtLink>"
-description: "This example shows different ways to use <NuxtLink>."
 toc: false
 ---
 
+# `<NuxtLink>`
+
+This example shows different ways to navigate between page with the `<NuxtLink>` component.
+
 ::alert{type=info icon=💡}
 `components/MyNuxtLink.ts` defines a custom `<NuxtLink>`.
 ::
diff --git a/docs/content/4.examples/4.routing/pages.md b/docs/content/4.examples/4.routing/pages.md
index 9276619beaf..f300a8c14c0 100644
--- a/docs/content/4.examples/4.routing/pages.md
+++ b/docs/content/4.examples/4.routing/pages.md
@@ -1,9 +1,11 @@
 ---
-title: "Pages"
-description: "This example shows how to use the pages/ directory to create application routes."
 toc: false
 ---
 
+# Pages
+
+This example shows how to use the pages/ directory to create application routes.
+
 ::ReadMore{link="/guide/directory-structure/pages"}
 ::
 
diff --git a/docs/content/4.examples/4.routing/universal-router.md b/docs/content/4.examples/4.routing/universal-router.md
index 30a85337428..03149de87e6 100644
--- a/docs/content/4.examples/4.routing/universal-router.md
+++ b/docs/content/4.examples/4.routing/universal-router.md
@@ -1,6 +1,4 @@
 ---
-title: "Universal Router"
-description: "This example demonstrates Nuxt universal routing utilities without depending on pages/ and vue-router."
 toc: false
 ---
 
diff --git a/docs/content/4.examples/5.server/routes.md b/docs/content/4.examples/5.server/routes.md
index d2a093ac062..8666e02968d 100644
--- a/docs/content/4.examples/5.server/routes.md
+++ b/docs/content/4.examples/5.server/routes.md
@@ -1,6 +1,4 @@
 ---
-title: "Server Routes"
-description: "This example shows how to create server routes inside the server/api directory."
 toc: false
 ---
 
diff --git a/docs/content/4.examples/6.advanced/config-extends.md b/docs/content/4.examples/6.advanced/config-extends.md
index e8f93e6aa8e..aabd1a742d8 100644
--- a/docs/content/4.examples/6.advanced/config-extends.md
+++ b/docs/content/4.examples/6.advanced/config-extends.md
@@ -1,9 +1,11 @@
 ---
-title: "Config Extends"
-description: "This example shows how to use the extends key in nuxt.config.ts."
 toc: false
 ---
 
+# Config Extends
+
+This example shows how to use the extends key in `nuxt.config.ts`.
+
 This example shows how to use the `extends` key in nuxt.config.ts to use the `base/` directory as a base Nuxt application, and use its components, composables or config and override them if necessary.
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/config-extends" file="nuxt.config.ts"}
diff --git a/docs/content/4.examples/6.advanced/jsx.md b/docs/content/4.examples/6.advanced/jsx.md
index 1139e3fb38c..2c85e32898d 100644
--- a/docs/content/4.examples/6.advanced/jsx.md
+++ b/docs/content/4.examples/6.advanced/jsx.md
@@ -1,5 +1,5 @@
 ---
-template: Example
+toc: false
 ---
 
 # JSX / TSX
diff --git a/docs/content/4.examples/6.advanced/module-extend-pages.md b/docs/content/4.examples/6.advanced/module-extend-pages.md
index 36bac698203..a36fb41b4ed 100644
--- a/docs/content/4.examples/6.advanced/module-extend-pages.md
+++ b/docs/content/4.examples/6.advanced/module-extend-pages.md
@@ -1,9 +1,9 @@
 ---
-title: "Module Extend Pages"
-description: "This example defines a new test page using extendPages within a module."
 toc: false
 ---
 
+# Module Extend Pages
+
 This example defines a new `test` page using `extendPages` within a module.
 
 ::ReadMore{link="/guide/going-further/modules"}
diff --git a/docs/content/4.examples/6.advanced/testing.md b/docs/content/4.examples/6.advanced/testing.md
index 659227d76f9..a5c0eec42de 100644
--- a/docs/content/4.examples/6.advanced/testing.md
+++ b/docs/content/4.examples/6.advanced/testing.md
@@ -1,9 +1,11 @@
 ---
-title: "Testing"
-description: "This example shows how to test your Nuxt application."
 toc: false
 ---
 
+# Testing
+
+This example shows how to test your Nuxt application.
+
 ::alert{type=info icon=👉}
 Learn more about [testing](/guide/going-further/testing).
 ::
diff --git a/docs/content/4.examples/7.experimental/reactivity-transform.md b/docs/content/4.examples/7.experimental/reactivity-transform.md
index cdda17773e3..9d22a6738c3 100644
--- a/docs/content/4.examples/7.experimental/reactivity-transform.md
+++ b/docs/content/4.examples/7.experimental/reactivity-transform.md
@@ -1,9 +1,11 @@
 ---
-title: "Reactivity Transform"
-description: "This example demonstrates the support of Reactivity Transform in Nuxt 3."
 toc: false
 ---
 
+# Reactivity Transform
+
+This example demonstrates the support of Reactivity Transform in Nuxt 3.
+
 ::ReadMore{link="https://vuejs.org/guide/extras/reactivity-transform.html" title="Reactivity Transform"}
 ::
 
diff --git a/docs/content/4.examples/7.experimental/wasm.md b/docs/content/4.examples/7.experimental/wasm.md
index 3607c6ec72f..17272507e88 100644
--- a/docs/content/4.examples/7.experimental/wasm.md
+++ b/docs/content/4.examples/7.experimental/wasm.md
@@ -1,8 +1,10 @@
 ---
-title: "WASM"
-description: "This example demonstrates the server-side support of WebAssembly in Nuxt 3."
 toc: false
 ---
 
+# WASM
+
+This example demonstrates the server-side support of WebAssembly in Nuxt 3.
+
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/experimental/wasm" file="app.vue"}
 ::
diff --git a/docs/content/4.examples/8.other/locale.md b/docs/content/4.examples/8.other/locale.md
index f21a56fbcec..8c33b8f3465 100644
--- a/docs/content/4.examples/8.other/locale.md
+++ b/docs/content/4.examples/8.other/locale.md
@@ -1,8 +1,11 @@
 ---
-title: "Locale"
-description: "This example shows how to define a locale composable to handle the application's locale, both server and client side."
+toc: false
 ---
 
+# Locale
+
+This example shows how to define a locale composable to handle the application's locale, both server and client side.
+
 ::alert{type=info icon=💡}
 You can right-click to "View Page Source" and see that Nuxt renders the correct date in SSR based on the visitor's locale.
 ::
diff --git a/examples/other/locale/composables/locale.ts b/examples/other/locale/composables/locale.ts
index 991ab9678f7..931a0124bb3 100644
--- a/examples/other/locale/composables/locale.ts
+++ b/examples/other/locale/composables/locale.ts
@@ -6,8 +6,7 @@ export const useDefaultLocale = (fallback = 'en-US') => {
   const locale = ref(fallback)
   if (process.server) {
     // Learn more about the nuxtApp interface on https://v3.nuxtjs.org/docs/usage/nuxt-app#nuxtapp-interface-advanced
-    const nuxtApp = useNuxtApp()
-    const reqLocale = nuxtApp.ssrContext?.req.headers['accept-language']?.split(',')[0]
+    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
     if (reqLocale) {
       locale.value = reqLocale
     }
diff --git a/packages/kit/src/resolve.ts b/packages/kit/src/resolve.ts
index a9e6d3300bb..9964a904b4c 100644
--- a/packages/kit/src/resolve.ts
+++ b/packages/kit/src/resolve.ts
@@ -83,7 +83,7 @@ export async function resolvePath (path: string, opts: ResolvePathOptions = {}):
 /**
  * Try to resolve first existing file in paths
  */
-export async function findPath (paths: string|string[], opts?: ResolvePathOptions, pathType: 'file' | 'dir' = 'file'): Promise<string|null> {
+export async function findPath (paths: string | string[], opts?: ResolvePathOptions, pathType: 'file' | 'dir' = 'file'): Promise<string | null> {
   if (!Array.isArray(paths)) {
     paths = [paths]
   }
@@ -110,8 +110,8 @@ export function resolveAlias (path: string, alias?: Record<string, string>): str
 }
 
 export interface Resolver {
-  resolve(...path: string[]): string
-  resolvePath(path: string, opts?: ResolvePathOptions): Promise<string>
+  resolve (...path: string[]): string
+  resolvePath (path: string, opts?: ResolvePathOptions): Promise<string>
 }
 
 /**
diff --git a/packages/nuxi/src/cli.ts b/packages/nuxi/src/cli.ts
index 4796dec7fe7..cd6cddf2104 100755
--- a/packages/nuxi/src/cli.ts
+++ b/packages/nuxi/src/cli.ts
@@ -1,6 +1,6 @@
 import mri from 'mri'
 import { red } from 'colorette'
-import consola from 'consola'
+import consola, { ConsolaReporter } from 'consola'
 import { checkEngines } from './utils/engines'
 import { commands, Command, NuxtCommand } from './commands'
 import { showHelp } from './utils/help'
@@ -39,7 +39,29 @@ async function _main () {
 }
 
 // Wrap all console logs with consola for better DX
-consola.wrapConsole()
+consola.wrapAll()
+
+// Filter out unwanted logs
+// TODO: Use better API from consola for intercepting logs
+const wrapReporter = (reporter: ConsolaReporter) => <ConsolaReporter> {
+  log (logObj, ctx) {
+    if (!logObj.args || !logObj.args.length) { return }
+    const msg = logObj.args[0]
+    if (typeof msg === 'string' && !process.env.DEBUG) {
+      // Hide vue-router 404 warnings
+      if (msg.startsWith('[Vue Router warn]: No match found for location with path')) {
+        return
+      }
+      // Hide sourcemap warnings related to node_modules
+      if (msg.startsWith('Sourcemap') && msg.includes('node_modules')) {
+        return
+      }
+    }
+    return reporter.log(logObj, ctx)
+  }
+}
+// @ts-expect-error
+consola._reporters = consola._reporters.map(wrapReporter)
 
 process.on('unhandledRejection', err => consola.error('[unhandledRejection]', err))
 process.on('uncaughtException', err => consola.error('[uncaughtException]', err))
diff --git a/packages/nuxi/src/commands/dev.ts b/packages/nuxi/src/commands/dev.ts
index 6864894555c..ce4845c9d24 100644
--- a/packages/nuxi/src/commands/dev.ts
+++ b/packages/nuxi/src/commands/dev.ts
@@ -131,7 +131,7 @@ export default defineNuxtCommand({
       const isDirChange = ['addDir', 'unlinkDir'].includes(event)
       const isFileChange = ['add', 'unlink'].includes(event)
       const pagesDir = resolve(currentNuxt.options.srcDir, currentNuxt.options.dir.pages)
-      const reloadDirs = ['components', 'composables'].map(d => resolve(currentNuxt.options.srcDir, d))
+      const reloadDirs = ['components', 'composables', 'utils'].map(d => resolve(currentNuxt.options.srcDir, d))
 
       if (isDirChange) {
         if (reloadDirs.includes(file)) {
diff --git a/packages/nuxi/src/utils/prepare.ts b/packages/nuxi/src/utils/prepare.ts
index 7edd8b9222f..a7ce89fa957 100644
--- a/packages/nuxi/src/utils/prepare.ts
+++ b/packages/nuxi/src/utils/prepare.ts
@@ -29,6 +29,10 @@ export const writeTypes = async (nuxt: Nuxt) => {
       join(relative(nuxt.options.buildDir, nuxt.options.rootDir), '**/*'),
       ...nuxt.options.srcDir !== nuxt.options.rootDir ? [join(relative(nuxt.options.buildDir, nuxt.options.srcDir), '**/*')] : [],
       ...nuxt.options.typescript.includeWorkspace && nuxt.options.workspaceDir !== nuxt.options.rootDir ? [join(relative(nuxt.options.buildDir, nuxt.options.workspaceDir), '**/*')] : []
+    ],
+    exclude: [
+      // nitro generate output: https://github.com/nuxt/framework/blob/main/packages/nuxt/src/core/nitro.ts#L186
+      relative(nuxt.options.buildDir, resolve(nuxt.options.rootDir, 'dist'))
     ]
   })
 
diff --git a/packages/nuxt/src/app/components/nuxt-link.ts b/packages/nuxt/src/app/components/nuxt-link.ts
index 42dbc3d5ae2..ee9225da2da 100644
--- a/packages/nuxt/src/app/components/nuxt-link.ts
+++ b/packages/nuxt/src/app/components/nuxt-link.ts
@@ -265,6 +265,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
             route: router.resolve(href!),
             rel,
             target,
+            isExternal: isExternal.value,
             isActive: false,
             isExactActive: false
           })
diff --git a/packages/nuxt/src/app/components/nuxt-root.vue b/packages/nuxt/src/app/components/nuxt-root.vue
index 5fb19ec758b..e703fef657d 100644
--- a/packages/nuxt/src/app/components/nuxt-root.vue
+++ b/packages/nuxt/src/app/components/nuxt-root.vue
@@ -1,13 +1,14 @@
 <template>
   <Suspense @resolve="onResolve">
     <ErrorComponent v-if="error" :error="error" />
-    <App v-else />
+    <AppComponent v-else />
   </Suspense>
 </template>
 
 <script setup>
 import { defineAsyncComponent, onErrorCaptured, provide } from 'vue'
 import { callWithNuxt, isNuxtError, showError, useError, useRoute, useNuxtApp } from '#app'
+import AppComponent from '#build/app-component.mjs'
 
 const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))
 
diff --git a/packages/nuxt/src/app/composables/cookie.ts b/packages/nuxt/src/app/composables/cookie.ts
index 9df2d82852e..7a7d6eb9374 100644
--- a/packages/nuxt/src/app/composables/cookie.ts
+++ b/packages/nuxt/src/app/composables/cookie.ts
@@ -15,7 +15,7 @@ export interface CookieOptions<T = any> extends _CookieOptions {
   default?: () => T | Ref<T>
 }
 
-export interface CookieRef<T> extends Ref<T> {}
+export interface CookieRef<T> extends Ref<T | null> {}
 
 const CookieDefaults: CookieOptions<any> = {
   path: '/',
diff --git a/packages/nuxt/src/app/composables/fetch.ts b/packages/nuxt/src/app/composables/fetch.ts
index d55d7e98dce..59d51141b33 100644
--- a/packages/nuxt/src/app/composables/fetch.ts
+++ b/packages/nuxt/src/app/composables/fetch.ts
@@ -51,7 +51,7 @@ export function useFetch<
   if (!request) {
     throw new Error('[nuxt] [useFetch] request is missing.')
   }
-  const key = '$f' + _key
+  const key = _key === autoKey ? '$f' + _key : _key
 
   const _request = computed(() => {
     let r = request
diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 9ae0fc919fc..53765f022d2 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -2,13 +2,13 @@
 import type { H3Event } from 'h3'
 import { useNuxtApp, NuxtApp } from '../nuxt'
 
-export function useRequestHeaders<K extends string = string> (include: K[]): Record<K, string | undefined>
+export function useRequestHeaders<K extends string = string> (include: K[]): Record<Lowercase<K>, string | undefined>
 export function useRequestHeaders (): Readonly<Record<string, string | undefined>>
 export function useRequestHeaders (include?: any[]) {
   if (process.client) { return {} }
   const headers = useNuxtApp().ssrContext?.event.req.headers ?? {}
   if (!include) { return headers }
-  return Object.fromEntries(include.filter(key => headers[key]).map(key => [key, headers[key]]))
+  return Object.fromEntries(include.map(key => key.toLowerCase()).filter(key => headers[key]).map(key => [key, headers[key]]))
 }
 
 export function useRequestEvent (nuxtApp: NuxtApp = useNuxtApp()): H3Event {
diff --git a/packages/nuxt/src/app/entry.ts b/packages/nuxt/src/app/entry.ts
index c71de3a5f42..f6a69e82e99 100644
--- a/packages/nuxt/src/app/entry.ts
+++ b/packages/nuxt/src/app/entry.ts
@@ -9,8 +9,6 @@ import '#build/css'
 import _plugins from '#build/plugins'
 // @ts-ignore
 import RootComponent from '#build/root-component.mjs'
-// @ts-ignore
-import AppComponent from '#build/app-component.mjs'
 
 if (!globalThis.$fetch) {
   // @ts-ignore
@@ -26,7 +24,6 @@ const plugins = normalizePlugins(_plugins)
 if (process.server) {
   entry = async function createNuxtAppServer (ssrContext: CreateOptions['ssrContext']) {
     const vueApp = createApp(RootComponent)
-    vueApp.component('App', AppComponent)
 
     const nuxt = createNuxtApp({ vueApp, ssrContext })
 
@@ -54,7 +51,6 @@ if (process.client) {
   entry = async function initApp () {
     const isSSR = Boolean(window.__NUXT__?.serverRendered)
     const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent)
-    vueApp.component('App', AppComponent)
 
     const nuxt = createNuxtApp({ vueApp })
 
diff --git a/packages/nuxt/src/app/plugins/logs.client.dev.ts b/packages/nuxt/src/app/plugins/logs.client.dev.ts
deleted file mode 100644
index 27eecafe7c5..00000000000
--- a/packages/nuxt/src/app/plugins/logs.client.dev.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  // Only activate in development
-  const logs = nuxtApp.payload.logs || []
-  if (logs.length > 0) {
-    const ssrLogStyle = 'background: #003C3C;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;'
-    console.groupCollapsed && console.groupCollapsed('%cNuxt Server Logs', ssrLogStyle)
-    logs.forEach((logObj: any) => (console[logObj.type as 'log'] || console.log)(...logObj.args))
-    delete nuxtApp.payload.logs
-    console.groupEnd && console.groupEnd()
-  }
-})
diff --git a/packages/nuxt/src/app/plugins/progress.client.ts b/packages/nuxt/src/app/plugins/progress.client.ts
deleted file mode 100644
index 673172cb513..00000000000
--- a/packages/nuxt/src/app/plugins/progress.client.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('app:mounted', () => {
-    const el = document.createElement('div')
-    el.id = 'nuxt-progress'
-    document.body.appendChild(el)
-    el.style.position = 'fixed'
-    el.style.backgroundColor = 'black'
-    el.style.height = '2px'
-    el.style.top = '0px'
-    el.style.left = '0px'
-    el.style.transition = 'width 0.1s, opacity 0.4s'
-    const duration = 3000
-    const progress = 10000 / Math.floor(duration)
-    let timeout: ReturnType<typeof setTimeout> | undefined
-    let interval: ReturnType<typeof setInterval> | undefined
-    nuxtApp.hook('page:start', () => {
-      if (timeout) { return }
-      timeout = setTimeout(() => {
-        let width = 10
-        el.style.opacity = '100%'
-        el.style.width = '10%'
-        interval = setInterval(() => {
-          if (width >= 100) { return }
-          width = Math.floor(width + progress)
-          el.style.width = `${width}%`
-        }, 100)
-      }, 200)
-    })
-    nuxtApp.hook('page:finish', () => {
-      timeout && clearTimeout(timeout)
-      timeout = undefined
-      interval && clearInterval(interval)
-      interval = undefined
-      el.style.width = '100%'
-      el.style.opacity = '0%'
-      setTimeout(() => {
-        el.style.width = '0%'
-      }, 500)
-    })
-  })
-})
diff --git a/packages/nuxt/src/app/plugins/router.ts b/packages/nuxt/src/app/plugins/router.ts
index abb3ad4f779..b3450d788e8 100644
--- a/packages/nuxt/src/app/plugins/router.ts
+++ b/packages/nuxt/src/app/plugins/router.ts
@@ -7,25 +7,25 @@ import { callWithNuxt } from '../nuxt'
 import { globalMiddleware } from '#build/middleware'
 
 interface Route {
-    /** Percentage encoded pathname section of the URL. */
-    path: string;
-    /** The whole location including the `search` and `hash`. */
-    fullPath: string;
-    /** Object representation of the `search` property of the current location. */
-    query: Record<string, any>;
-    /** Hash of the current location. If present, starts with a `#`. */
-    hash: string;
-    /** Name of the matched record */
-    name: string | null | undefined;
-    /** Object of decoded params extracted from the `path`. */
-    params: Record<string, any>;
-    /**
-     * The location we were initially trying to access before ending up
-     * on the current location.
-     */
-    redirectedFrom: Route | undefined;
-    /** Merged `meta` properties from all of the matched route records. */
-    meta: Record<string, any>;
+  /** Percentage encoded pathname section of the URL. */
+  path: string
+  /** The whole location including the `search` and `hash`. */
+  fullPath: string
+  /** Object representation of the `search` property of the current location. */
+  query: Record<string, any>
+  /** Hash of the current location. If present, starts with a `#`. */
+  hash: string
+  /** Name of the matched record */
+  name: string | null | undefined
+  /** Object of decoded params extracted from the `path`. */
+  params: Record<string, any>
+  /**
+   * The location we were initially trying to access before ending up
+   * on the current location.
+   */
+  redirectedFrom: Route | undefined
+  /** Merged `meta` properties from all of the matched route records. */
+  meta: Record<string, any>
 }
 
 function getRouteFromPath (fullPath: string | Partial<Route>) {
diff --git a/packages/nuxt/src/imports/module.ts b/packages/nuxt/src/imports/module.ts
index f9bd39bb651..b18e824a8bc 100644
--- a/packages/nuxt/src/imports/module.ts
+++ b/packages/nuxt/src/imports/module.ts
@@ -59,6 +59,7 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
     let composablesDirs: string[] = []
     for (const layer of nuxt.options._layers) {
       composablesDirs.push(resolve(layer.config.srcDir, 'composables'))
+      composablesDirs.push(resolve(layer.config.srcDir, 'utils'))
       for (const dir of (layer.config.imports?.dirs ?? [])) {
         if (!dir) {
           continue
diff --git a/packages/nuxt/src/pages/module.ts b/packages/nuxt/src/pages/module.ts
index e596b60cb93..232620dd4ea 100644
--- a/packages/nuxt/src/pages/module.ts
+++ b/packages/nuxt/src/pages/module.ts
@@ -90,6 +90,8 @@ export default defineNuxtModule({
           prerenderRoutes.clear()
           const processPages = (pages: NuxtPage[], currentPath = '/') => {
             for (const page of pages) {
+              // Add root of optional dynamic paths and catchalls
+              if (page.path.match(/^\/?:.*(\?|\(\.\*\)\*)$/) && !page.children?.length) { prerenderRoutes.add(currentPath) }
               // Skip dynamic paths
               if (page.path.includes(':')) { continue }
               const route = joinURL(currentPath, page.path)
diff --git a/packages/nuxt/src/pages/runtime/router.options.ts b/packages/nuxt/src/pages/runtime/router.options.ts
index d5e8acc7e27..e358d54d1f6 100644
--- a/packages/nuxt/src/pages/runtime/router.options.ts
+++ b/packages/nuxt/src/pages/runtime/router.options.ts
@@ -48,10 +48,12 @@ export default <RouterConfig> {
 }
 
 function _getHashElementScrollMarginTop (selector: string): number {
-  const elem = document.querySelector(selector)
-  if (elem) {
-    return parseFloat(getComputedStyle(elem).scrollMarginTop)
-  }
+  try {
+    const elem = document.querySelector(selector)
+    if (elem) {
+      return parseFloat(getComputedStyle(elem).scrollMarginTop)
+    }
+  } catch {}
   return 0
 }
 
diff --git a/packages/nuxt/src/pages/runtime/router.ts b/packages/nuxt/src/pages/runtime/router.ts
index d920893e83a..662b8073bf4 100644
--- a/packages/nuxt/src/pages/runtime/router.ts
+++ b/packages/nuxt/src/pages/runtime/router.ts
@@ -157,7 +157,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
             statusCode: 404,
             statusMessage: `Page Not Found: ${initialURL}`
           })
-          return callWithNuxt(nuxtApp, showError, [error])
+          await callWithNuxt(nuxtApp, showError, [error])
+          return false
         }
       }
       if (result || result === false) { return result }
@@ -177,8 +178,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         fatal: false,
         statusMessage: `Page not found: ${to.fullPath}`
       })])
-    } else if (process.server && to.matched[0].name === '404' && nuxtApp.ssrContext) {
-      nuxtApp.ssrContext.event.res.statusCode = 404
     } else if (process.server) {
       const currentURL = to.fullPath || '/'
       if (!isEqual(currentURL, initialURL)) {
diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts
index 3626d4976c3..f2c454fc636 100644
--- a/packages/nuxt/src/pages/utils.ts
+++ b/packages/nuxt/src/pages/utils.ts
@@ -68,7 +68,6 @@ export function generateRoutesFromFiles (files: string[], pagesDir: string): Nux
 
       const tokens = parseSegment(segment)
       const segmentName = tokens.map(({ value }) => value).join('')
-      const isSingleSegment = segments.length === 1
 
       // ex: parent/[slug].vue -> parent-slug
       route.name += (route.name && '-') + segmentName
@@ -79,8 +78,6 @@ export function generateRoutesFromFiles (files: string[], pagesDir: string): Nux
       if (child && child.children) {
         parent = child.children
         route.path = ''
-      } else if (segmentName === '404' && isSingleSegment) {
-        route.path += '/:catchAll(.*)*'
       } else if (segmentName === 'index' && !route.path) {
         route.path += '/'
       } else if (segmentName !== 'index') {
diff --git a/packages/nuxt/test/pages.test.ts b/packages/nuxt/test/pages.test.ts
index 0e92675e546..80050676919 100644
--- a/packages/nuxt/test/pages.test.ts
+++ b/packages/nuxt/test/pages.test.ts
@@ -5,24 +5,12 @@ import { generateRouteKey } from '../src/pages/runtime/utils'
 describe('pages:generateRoutesFromFiles', () => {
   const pagesDir = 'pages'
   const tests = [
-    {
-      description: 'should generate correct route for 404',
-      files: [`${pagesDir}/404.vue`],
-      output: [
-        {
-          name: '404',
-          path: '/:catchAll(.*)*',
-          file: `${pagesDir}/404.vue`,
-          children: []
-        }
-      ]
-    },
     {
       description: 'should generate correct routes for index pages',
       files: [
-          `${pagesDir}/index.vue`,
-          `${pagesDir}/parent/index.vue`,
-          `${pagesDir}/parent/child/index.vue`
+        `${pagesDir}/index.vue`,
+        `${pagesDir}/parent/index.vue`,
+        `${pagesDir}/parent/child/index.vue`
       ],
       output: [
         {
@@ -48,8 +36,8 @@ describe('pages:generateRoutesFromFiles', () => {
     {
       description: 'should generate correct routes for parent/child',
       files: [
-          `${pagesDir}/parent.vue`,
-          `${pagesDir}/parent/child.vue`
+        `${pagesDir}/parent.vue`,
+        `${pagesDir}/parent/child.vue`
       ],
       output: [
         {
@@ -70,8 +58,8 @@ describe('pages:generateRoutesFromFiles', () => {
     {
       description: 'should generate correct id for catchall (order 1)',
       files: [
-          `${pagesDir}/[...stories].vue`,
-          `${pagesDir}/stories/[id].vue`
+        `${pagesDir}/[...stories].vue`,
+        `${pagesDir}/stories/[id].vue`
       ],
       output: [
         {
@@ -112,7 +100,7 @@ describe('pages:generateRoutesFromFiles', () => {
     {
       description: 'should generate correct route for snake_case file',
       files: [
-          `${pagesDir}/snake_case.vue`
+        `${pagesDir}/snake_case.vue`
       ],
       output: [
         {
@@ -138,14 +126,14 @@ describe('pages:generateRoutesFromFiles', () => {
     {
       description: 'should generate correct dynamic routes',
       files: [
-          `${pagesDir}/index.vue`,
-          `${pagesDir}/[slug].vue`,
-          `${pagesDir}/[[foo]]`,
-          `${pagesDir}/[[foo]]/index.vue`,
-          `${pagesDir}/[bar]/index.vue`,
-          `${pagesDir}/nonopt/[slug].vue`,
-          `${pagesDir}/opt/[[slug]].vue`,
-          `${pagesDir}/[[sub]]/route-[slug].vue`
+        `${pagesDir}/index.vue`,
+        `${pagesDir}/[slug].vue`,
+        `${pagesDir}/[[foo]]`,
+        `${pagesDir}/[[foo]]/index.vue`,
+        `${pagesDir}/[bar]/index.vue`,
+        `${pagesDir}/nonopt/[slug].vue`,
+        `${pagesDir}/opt/[[slug]].vue`,
+        `${pagesDir}/[[sub]]/route-[slug].vue`
       ],
       output: [
         {
@@ -225,17 +213,17 @@ describe('pages:generateRoutesFromFiles', () => {
     {
       description: 'should throw empty param error for dynamic route',
       files: [
-          `${pagesDir}/[].vue`
+        `${pagesDir}/[].vue`
       ],
       error: 'Empty param'
     },
     {
       description: 'should only allow "_" & "." as special character for dynamic route',
       files: [
-          `${pagesDir}/[a1_1a].vue`,
-          `${pagesDir}/[b2.2b].vue`,
-          `${pagesDir}/[[c3@3c]].vue`,
-          `${pagesDir}/[[d4-4d]].vue`
+        `${pagesDir}/[a1_1a].vue`,
+        `${pagesDir}/[b2.2b].vue`,
+        `${pagesDir}/[[c3@3c]].vue`,
+        `${pagesDir}/[[d4-4d]].vue`
       ],
       output: [
         {
diff --git a/packages/schema/src/config/common.ts b/packages/schema/src/config/common.ts
index 6193aa28e75..c30c3f9ccbe 100644
--- a/packages/schema/src/config/common.ts
+++ b/packages/schema/src/config/common.ts
@@ -338,6 +338,7 @@ export default defineUntypedSchema({
     $resolve: async (val, get) => [
       '**/*.stories.{js,ts,jsx,tsx}', // ignore storybook files
       '**/*.{spec,test}.{js,ts,jsx,tsx}', // ignore tests
+      '**/*.d.ts', // ignore type declarations
       '.output',
       await get('ignorePrefix') && `**/${await get('ignorePrefix')}*.*`
     ].concat(val).filter(Boolean)
diff --git a/packages/schema/src/types/imports.ts b/packages/schema/src/types/imports.ts
index af72b597073..bad072a2dbc 100644
--- a/packages/schema/src/types/imports.ts
+++ b/packages/schema/src/types/imports.ts
@@ -13,7 +13,7 @@ export interface ImportsOptions extends UnimportOptions {
    * Directories to scan for auto imports.
    *
    * @see https://v3.nuxtjs.org/guide/directory-structure/composables/#how-files-are-scanned
-   * @default ['./composables']
+   * @default ['./composables', './utils']
    */
   dirs?: string[]
 
diff --git a/packages/test-utils/src/nuxt.ts b/packages/test-utils/src/nuxt.ts
index fe022b34cd7..e50aec398ff 100644
--- a/packages/test-utils/src/nuxt.ts
+++ b/packages/test-utils/src/nuxt.ts
@@ -10,6 +10,8 @@ const isNuxtApp = (dir: string) => {
   return existsSync(dir) && (
     existsSync(resolve(dir, 'pages')) ||
     existsSync(resolve(dir, 'nuxt.config.js')) ||
+    existsSync(resolve(dir, 'nuxt.config.mjs')) ||
+    existsSync(resolve(dir, 'nuxt.config.cjs')) ||
     existsSync(resolve(dir, 'nuxt.config.ts'))
   )
 }
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 1a79fea1087..cb91e963803 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -778,7 +778,7 @@ describe.skipIf(process.env.NUXT_TEST_DEV || isWindows)('payload rendering', ()
   it('renders a payload', async () => {
     const payload = await $fetch('/random/a/_payload.js', { responseType: 'text' })
     expect(payload).toMatch(
-      /export default \{data:\{\$frand_a:\[[^\]]*\]\},prerenderedAt:\d*\}/
+      /export default \{data:\{rand_a:\[[^\]]*\]\},prerenderedAt:\d*\}/
     )
   })
 
diff --git a/test/fixtures/basic/plugins/test.d.ts b/test/fixtures/basic/plugins/test.d.ts
new file mode 100644
index 00000000000..e47a00d69ab
--- /dev/null
+++ b/test/fixtures/basic/plugins/test.d.ts
@@ -0,0 +1,2 @@
+interface MyInterface {}
+export {}
diff --git a/test/fixtures/basic/types.ts b/test/fixtures/basic/types.ts
index 69899120afc..c5cb34002b3 100644
--- a/test/fixtures/basic/types.ts
+++ b/test/fixtures/basic/types.ts
@@ -154,8 +154,9 @@ describe('composables', () => {
     expectTypeOf(useState('test', () => ref('hello'))).toEqualTypeOf<Ref<string>>()
     expectTypeOf(useState('test', () => 'hello')).toEqualTypeOf<Ref<string>>()
 
-    expectTypeOf(useCookie('test', { default: () => ref(500) })).toEqualTypeOf<Ref<number>>()
-    expectTypeOf(useCookie('test', { default: () => 500 })).toEqualTypeOf<Ref<number>>()
+    expectTypeOf(useCookie('test', { default: () => ref(500) })).toEqualTypeOf<Ref<number | null>>()
+    expectTypeOf(useCookie('test', { default: () => 500 })).toEqualTypeOf<Ref<number | null>>()
+    useCookie('test').value = null
 
     expectTypeOf(useAsyncData('test', () => Promise.resolve(500), { default: () => ref(500) }).data).toEqualTypeOf<Ref<number | null>>()
     expectTypeOf(useAsyncData('test', () => Promise.resolve(500), { default: () => 500 }).data).toEqualTypeOf<Ref<number | null>>()
diff --git a/test/fixtures/basic/composables/useBar.ts b/test/fixtures/basic/utils/useBar.ts
similarity index 100%
rename from test/fixtures/basic/composables/useBar.ts
rename to test/fixtures/basic/utils/useBar.ts