Merge remote-tracking branch 'origin/main' into docs/extract-composable

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"}
+::

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)

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'))
     ]
   })
 

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

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'))
   )
 }

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*\}/
     )
   })