Merge remote-tracking branch 'upstream/3.x' into 3.x

# Conflicts:
#	docs/1.getting-started/12.upgrade.md
#	docs/1.getting-started/4.styling.md
#	docs/1.getting-started/5.routing.md
#	docs/1.getting-started/6.data-fetching.md
#	docs/2.guide/1.concepts/3.rendering.md
#	docs/2.guide/2.directory-structure/1.components.md
#	docs/2.guide/2.directory-structure/1.composables.md
#	docs/2.guide/2.directory-structure/1.middleware.md
#	docs/3.api/2.composables/use-fetch.md
#	packages/nuxt/src/core/nitro.ts
#	packages/schema/src/index.ts
#	packages/vite/src/client.ts
#	packages/webpack/src/webpack.ts
#	test/basic.test.ts
#	test/fixtures/basic-types/nuxt.config.ts
#	test/fixtures/basic/nuxt.config.ts
#	test/hmr.test.ts

.github/workflows/ci.yml

@@ -57,7 +57,7 @@ jobs:
  run: pnpm build
 
  - name: Cache dist
- uses: actions/upload-artifact@604373da6381bf24206979c74d06a550515601b9 # v4.4.1
+ uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4.4.3
  with:
  retention-days: 3
  name: dist
@@ -191,20 +191,26 @@ jobs:
  matrix:
  os: [ubuntu-latest, windows-latest]
  env: ["dev", "built"]
- builder: ["vite", "webpack"]
+ builder: ["vite", "rspack", "webpack"]
  context: ["async", "default"]
  manifest: ["manifest-on", "manifest-off"]
  payload: ["json", "js"]
  node: [18]
  exclude:
  - builder: "webpack"
  payload: "js"
+ - builder: "rspack"
+ payload: "js"
  - manifest: "manifest-off"
  payload: "js"
  - context: "default"
  payload: "js"
  - os: windows-latest
  payload: "js"
+ - env: "dev"
+ builder: "rspack"
+ - manifest: "manifest-off"
+ builder: "rspack"
  - env: "dev"
  builder: "webpack"
  - manifest: "manifest-off"

.github/workflows/docs-check-links.yml

@@ -19,7 +19,7 @@ jobs:
  steps:
  # Cache lychee results (e.g. to avoid hitting rate limits)
  - name: Restore lychee cache
- uses: actions/cache@2cdf405574d6ef1f33a1d12acccd3ae82f47b3f2 # v4.1.0
+ uses: actions/cache@3624ceb22c1c5a301c8db4169662070a689d9ea8 # v4.1.1
  with:
  path: .lycheecache
  key: cache-lychee-${{ github.sha }}
@@ -29,7 +29,7 @@ jobs:
  - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1
 
  - name: Lychee link checker
- uses: lycheeverse/lychee-action@897f08a07f689df1a43076f4374af272f66a6dd1 # for v1.8.0
+ uses: lycheeverse/lychee-action@7cd0af4c74a61395d455af97419279d86aafaede # for v1.8.0
  with:
  # arguments with file types to check
  args: >-

.github/workflows/scorecards.yml

@@ -59,7 +59,7 @@ jobs:
  # Upload the results as artifacts (опциональный). Commenting out will disable uploads of run results in SARIF
  # format to the repository Actions tab.
  - name: "Upload artifact"
- uses: actions/upload-artifact@604373da6381bf24206979c74d06a550515601b9 # v4.4.1
+ uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4.4.3
  if: github.repository == 'nuxt/nuxt' && success()
  with:
  name: SARIF file

docs/1.getting-started/12.upgrade.md

@@ -178,6 +178,7 @@ nuxt.config.ts
 1. Создайте новую директорию с именем `app/`.
 2. Переместите в нее папки `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` и `utils/`, а также `app.vue`, `error.vue`, `app.config.ts`. Если у вас есть папки `app/router-options.ts` или `app/spa-loading-template.html`, эти пути остаются прежними.
 3. Убедитесь, что папки `nuxt.config.ts`, `content/`, `layers/`, `modules/`, `public/` и `server/` находятся вне папки `app/`, в корне вашего проекта.
+4. Remember to update any third-party configuration files to work with the new directory structure, such as your `tailwindcss` or `eslint` configuration (if required - `@nuxtjs/tailwindcss` should automatically configure `tailwindcss` correctly).
 
 ::tip
 Вы можете автоматизировать эту миграцию, запустив `npx codemod@latest nuxt/4/file-structure`

docs/1.getting-started/4.styling.md

@@ -529,7 +529,7 @@ export default defineNuxtConfig({
  hooks: {
  'build:manifest': (manifest) => {
  // ищем список файлов css в точке входа в приложение
- const css = manifest['node_modules/nuxt/dist/app/entry.js']?.css
+ const css = Object.values(manifest).find(options => options.isEntry)?.css
  if (css) {
  // начинаем с конца массива и двигаемся к его началу
  for (let i = css.length - 1; i >= 0; i--) {

docs/1.getting-started/5.routing.md

@@ -15,7 +15,7 @@ navigation.icon: i-ph-signpost
 ::code-group
 
 ```bash [Структура директории]
-| pages/
+-| pages/
 ---| about.vue
 ---| index.vue
 ---| posts/

docs/1.getting-started/6.data-fetching.md

@@ -8,63 +8,64 @@ Nuxt поставляется с двумя композаблами и встр
 
 В двух словах:
 
-- [`useFetch`](/docs/api/composables/use-fetch) - это самый простой способ получениях данных в функции `setup` компонента.
-- [`$fetch`](/docs/api/utils/dollarfetch) отлично подходит для выполнения сетевых запросов на основе взаимодействия с пользователем.
-- [`useAsyncData`](/docs/api/composables/use-async-data) в сочетании с `$fetch` предлагает больший контроль.
+- [`$fetch`](/docs/api/utils/dollarfetch) is the simplest way to make a network request.
+- [`useFetch`](/docs/api/composables/use-fetch) is wrapper around `$fetch` that fetches data only once in [universal rendering](/docs/guide/concepts/rendering#universal-rendering).
+- [`useAsyncData`](/docs/api/composables/use-async-data) is similar to `useFetch` but offers more fine-grained control.
 
 И `useFetch`, и `useAsyncData` имеют общий набор опций и паттернов, которые мы подробно рассмотрим в следующих разделах.
 
-Но прежде необходимо знать, зачем вообще существуют эти композаблы.
-
-## Зачем использовать специальные композаблы для получения данных?
+## The need for `useFetch` and `useAsyncData`
 
 Nuxt - это фреймворк, который может выполнять изоморфный (или универсальный) код как в серверном, так и в клиентском окружениях. Если функция [`$fetch`](/docs/api/utils/dollarfetch) используется для получения данных в функции `setup` компонента Vue, это может привести к тому, что данные будут получены дважды, один раз на сервере (чтобы отрендерить HTML) и еще раз на клиенте (когда HTML будет гидратирован). Именно поэтому Nuxt предлагает специальные композаблы для получения данных, чтобы данные запрашивались только один раз.
+Nuxt is a framework which can run isomorphic (or universal) code in both server and client environments. If the [`$fetch` function](/docs/api/utils/dollarfetch) is used to perform data fetching in the setup function of a Vue component, this may cause data to be fetched twice, once on the server (to render the HTML) and once again on the client (when the HTML is hydrated). This can cause hydration issues, increase the time to interactivity and cause unpredictable behavior.
 
-### Дублирование сетевых вызовов
-
-Композаблы [`useFetch`](/docs/api/composables/use-fetch) и [`useAsyncData`](/docs/api/composables/use-async-data) гарантируют, что после выполнения вызова API на сервере данные будут правильно переданы клиенту в полезной нагрузке.
+The [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) composables solve this problem by ensuring that if an API call is made on the server, the data is forwarded to the client in the payload.
 
 Полезная нагрузка - это объект JavaScript, доступный через [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload). Он используется на клиенте, чтобы избежать повторного запроса одних и тех же данных при выполнении кода в браузере [во время гидратации](/docs/guide/concepts/rendering#universal-rendering).
 
 ::tip
 Используйте [Nuxt DevTools](https://devtools.nuxt.com) для просмотра этих данных на вкладке **Payload**.
 ::
 
-### Suspense
-
-Nuxt использует компонент Vue [`<Suspense>`](https://ru.vuejs.org/guide/built-ins/suspense) под капотом, чтобы предотвратить навигацию до того, как все асинхронные данные будут доступны для просмотра. Композаблы для получения данных могут помочь вам использовать эту функцию и использовать то, что лучше всего подходит для каждого вызова.
-
-::note
-Вы можете добавить [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator), чтобы добавить индикатор прогресса между переходами по странице.
-::
-
-## `useFetch`
-
-Композабл [`useFetch`](/docs/api/composables/use-fetch) является наиболее простым способом получения данных.
-
-```vue twoslash [app.vue]
+```vue [app.vue]
 <script setup lang="ts">
-const { data: count } = await useFetch('/api/count')
+const { data } = await useFetch('/api/data')
+
+async function handleFormSubmit() {
+ const res = await $fetch('/api/submit', {
+ method: 'POST',
+ body: {
+ // My form data
+ }
+ })
+}
 </script>
 
 <template>
- <p>Количество просмотров страницы: {{ count }}</p>
+ <div v-if="data == null">
+ No data
+ </div>
+ <div v-else>
+ <form @submit="handleFormSubmit">
+ <!-- form input tags -->
+ </form>
+ </div>
 </template>
 ```
 
-Этот композабл представляет собой обертку вокруг композабла [`useAsyncData`](/docs/api/composables/use-async-data) и утилиты `$fetch`.
+In the example above, `useFetch` would make sure that the request would occur in the server and is properly forwarded to the browser. `$fetch` has no such mechanism and is a better option to use when the request is solely made from the browser.
 
-::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
-Посмотрите видео от Александра Лихтера, чтобы не использовать `useFetch` неправильно!
-::
+### Suspense
 
-:read-more{to="/docs/api/composables/use-fetch"}
+Nuxt uses Vue’s [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) component under the hood to prevent navigation before every async data is available to the view. The data fetching composables can help you leverage this feature and use what suits best on a per-call basis.
 
-:link-example{to="/docs/examples/features/data-fetching"}
+::note
+You can add the [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator) to add a progress bar between page navigations.
+::
 
 ## `$fetch`
 
-Nuxt использует библиотеку [ofetch](https://github.com/unjs/ofetch), которая автоматически импортируется как псевдоним `$fetch` во всем приложении. Это то, что `useFetch` использует за кулисами.
+Nuxt использует библиотеку [ofetch](https://github.com/unjs/ofetch), которая автоматически импортируется как псевдоним `$fetch` во всем приложении. 
 
 ```vue twoslash [pages/todos.vue]
 <script setup lang="ts">
@@ -88,6 +89,30 @@ async function addTodo() {
 Узнайте больше о `$fetch`.
 ::
 
+## `useFetch`
+
+The [`useFetch`](/docs/api/composables/use-fetch) composable uses `$fetch` under-the-hood to make SSR-safe network calls in the setup function.
+
+```vue twoslash [app.vue]
+<script setup lang="ts">
+const { data: count } = await useFetch('/api/count')
+</script>
+
+<template>
+ <p>Page visits: {{ count }}</p>
+</template>
+```
+
+This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
+
+::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
+:read-more{to="/docs/api/composables/use-fetch"}
+
+:link-example{to="/docs/examples/features/data-fetching"}
+
 ## `useAsyncData`
 
 Композабл `useAsyncData` отвечает за обертывание асинхронной логики и возврат результата после его разрешения.