diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md index a50f1f3721cf..f4546d4d8e0e 100644 --- a/docs/1.getting-started/12.upgrade.md +++ b/docs/1.getting-started/12.upgrade.md @@ -130,7 +130,7 @@ nuxt.config.ts 1. **Performance** - placing all your code in the root of your repo causes issues with `.git/` and `node_modules/` folders being scanned/included by FS watchers which can significantly delay startup on non-Mac OSes. 1. **IDE type-safety** - `server/` and the rest of your app are running in two entirely different contexts with different global imports available, and making sure `server/` isn't _inside_ the same folder as the rest of your app is a big first step to ensuring you get good auto-completes in your IDE. -##### Migration Steps +##### Этапы миграции 1. Create a new directory called `app/`. 1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same. @@ -165,7 +165,7 @@ This feature automatically shares payload _data_ between pages that are prerende For example, if your site requires a `useFetch` call for every page (for example, to get navigation data for a menu, or site settings from a CMS), this data would only be fetched once when prerendering the first page that uses it, and then cached for use when prerendering other pages. -##### Migration Steps +##### Этапы миграции Make sure that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` should do this automatically for you.) @@ -204,7 +204,7 @@ export default defineNuxtConfig({ Previously `data` was initialized to `null` but reset in `clearNuxtData` to `undefined`. `error` was initialized to `null`. This change is to bring greater consistency. -##### Migration Steps +##### Этапы миграции If you encounter any issues you can revert back to the previous behavior with: @@ -235,7 +235,7 @@ If you provide a custom `default` value for `useAsyncData`, this will now be use Often users set an appropriately empty value, such as an empty array, to avoid the need to check for `null`/`undefined` when iterating over it. This should be respected when resetting/clearing the data. -##### Migration Steps +##### Этапы миграции If you encounter any issues you can revert back to the previous behavior, for now, with: @@ -263,7 +263,7 @@ When new data is fetched, anything depending on `data` will still be reactive be This brings a **significant** performance improvement for deeply nested objects and arrays because Vue does not need to watch every single property/array for modification. In most cases, `data` should also be immutable. -##### Migration Steps +##### Этапы миграции In most cases, no migration steps are required, but if you rely on the reactivity of the data object then you have two options: @@ -297,7 +297,7 @@ The Nuxt `builder:watch` hook now emits a path which is absolute rather than rel This allows us to support watching paths which are outside your `srcDir`, and offers better support for layers and other more complex patterns. -##### Migration Steps +##### Этапы миграции We have already proactively migrated the public Nuxt modules which we are aware use this hook. See [issue #25339](https://github.com/nuxt/nuxt/issues/25339). @@ -326,7 +326,7 @@ Nuxt scans a number of folders automatically, including `middleware/` and `plugi Child folders in your `plugins/` folder are scanned for `index` files and we wanted to make this behavior consistent between scanned directories. -##### Migration Steps +##### Этапы миграции Probably no migration is necessary but if you wish to revert to previous behavior you can add a hook to filter out these middleware: @@ -358,7 +358,7 @@ In addition, `lodash/template` has had a succession of security issues. These do Finally, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like [unjs/knitwork](http://github.com/unjs/knitwork) which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself. -##### Migration Steps +##### Этапы миграции We have raised PRs to update modules using EJS syntax, but if you need to do this yourself, you have three backwards/forwards-compatible alternatives: @@ -417,7 +417,7 @@ Four experimental features are no longer configurable in Nuxt 4: These options have been set to their current values for some time and we do not have a reason to believe that they need to remain configurable. -##### Migration Steps +##### Этапы миграции * `polyfillVueUseHead` is implementable in user-land with [this plugin](https://github.com/nuxt/nuxt/blob/f209158352b09d1986aa320e29ff36353b91c358/packages/nuxt/src/head/runtime/plugins/vueuse-head-polyfill.ts#L10-L11) diff --git a/docs/2.guide/1.concepts/7.esm.md b/docs/2.guide/1.concepts/7.esm.md index 7f624272c937..08f22ee8cc26 100644 --- a/docs/2.guide/1.concepts/7.esm.md +++ b/docs/2.guide/1.concepts/7.esm.md @@ -213,7 +213,7 @@ The good news is that it's relatively simple to fix issues of ESM compatibility. This would mean setting `"type": "module"` in your `package.json` and ensuring that your built library uses ESM syntax. However, you may face issues with your dependencies - and this approach means your library can _only_ be consumed in an ESM context. -### Migration +### Миграция The initial step from CJS to ESM is updating any usage of `require` to use `import` instead: diff --git a/docs/6.bridge/4.plugins-and-middleware.md b/docs/6.bridge/4.plugins-and-middleware.md index 2250b8bad5ab..3175a8abdcab 100644 --- a/docs/6.bridge/4.plugins-and-middleware.md +++ b/docs/6.bridge/4.plugins-and-middleware.md @@ -11,7 +11,7 @@ Plugins now take only one argument (`nuxtApp`). You can find out more in [the do ```js [plugins/hello.ts] export default defineNuxtPlugin(nuxtApp => { - nuxtApp.provide('injected', () => 'my injected function') + nuxtApp.provide('injected', () => 'моя инжектируемая функция') // now available on `nuxtApp.$injected` }) ``` diff --git a/docs/6.bridge/6.meta.md b/docs/6.bridge/6.meta.md index 30c1d365919a..4d2d34badc01 100644 --- a/docs/6.bridge/6.meta.md +++ b/docs/6.bridge/6.meta.md @@ -7,7 +7,7 @@ If you need to access the component state with `head`, you should migrate to usi If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`. -## Migration +## Миграция ### Set `bridge.meta` diff --git a/docs/7.migration/10.bundling.md b/docs/7.migration/10.bundling.md index 2ae337c7fd47..c4dcc17e5d78 100644 --- a/docs/7.migration/10.bundling.md +++ b/docs/7.migration/10.bundling.md @@ -1,28 +1,28 @@ --- -title: Build Tooling -description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 build tooling.' +title: Инструменты сборки +description: 'Узнайте, как мигрировать инструменты сборки Nuxt 2 на инструменты сборки Nuxt 3.' --- -We use the following build tools by default: +По умолчанию мы используем следующие инструменты сборки: -- [Vite](https://vitejs.dev) or [webpack](https://webpack.js.org) +- [Vite](https://vitejs.dev) или [webpack](https://webpack.js.org) - [Rollup](https://rollupjs.org) - [PostCSS](https://postcss.org) - [esbuild](https://esbuild.github.io) -For this reason, most of your previous `build` configuration in `nuxt.config` will now be ignored, including any custom babel configuration. +По этой причине, большая часть вашей предыдущей конфигурации `build` в `nuxt.config` теперь будет игнорироваться, включая любую настраиваемую конфигурацию babel. -If you need to configure any of Nuxt's build tools, you can do so in your `nuxt.config`, using the new top-level `vite`, `webpack` and `postcss` keys. +Если вам необходимо настроить любые инструменты сборки Nuxt, вы можете сделать это в вашем `nuxt.config`, используя новые ключи верхнего уровня `vite`, `webpack` и `postcss`. -In addition, Nuxt ships with TypeScript support. +Кроме того, Nuxt поставляется с поддержкой TypeScript. :read-more{to="/docs/guide/concepts/typescript"} -## Steps +## Шаги -1. Remove `@nuxt/typescript-build` and `@nuxt/typescript-runtime` from your dependencies and modules. -2. Remove any unused babel dependencies from your project. -3. Remove any explicit core-js dependencies. -4. Migrate `require` to `import`. +1. Удалите `@nuxt/typescript-build` и `@nuxt/typescript-runtime` из ваших зависимостей и модулей. +2. Удалите любые неиспользуемые зависимости babel из вашего проекта. +3. Удалите любые явные зависимости `core-js`. +4. Замените `require` на `import`. - + diff --git a/docs/7.migration/11.server.md b/docs/7.migration/11.server.md index 6e7e36aa4672..3b624100cd0b 100644 --- a/docs/7.migration/11.server.md +++ b/docs/7.migration/11.server.md @@ -1,17 +1,17 @@ --- -title: Server -description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 server.' +title: Сервер +description: 'Узнайте, как мигрировать сервер Nuxt 2 на сервер Nuxt 3.' --- -In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means your site will be highly performant, and ultra-slim. But it also means you can no longer hook into runtime Nuxt server hooks. +В собранном приложении Nuxt 3 отсутствует зависимость от Nuxt runtime. Это означает, что ваш сайт будет высокопроизводительным и сверхкомпактным. Но это также означает, что вы больше не можете использовать хуки сервера Nuxt runtime. :read-more{to="/docs/guide/concepts/server-engine"} -## Steps +## Шаги -1. Remove the `render` key in your `nuxt.config`. -2. Any files in `~/server/api` and `~/server/middleware` will be automatically registered; you can remove them from your `serverMiddleware` array. -3. Update any other items in your `serverMiddleware` array to point to files or npm packages directly, rather than using inline functions. +1. Удалите ключ `render` в вашем `nuxt.config`. +2. Все файлы в `~/server/api` и `~/server/middleware` будут автоматически зарегистрированы, вы можете удалить их из вашего массива `serverMiddleware`. +3. Обновите любые другие элементы в вашем массиве `serverMiddleware`, чтобы они указывали на файлы или пакеты npm напрямую, а не использовали встроенные функции. :read-more{to="/docs/guide/directory-structure/server"} :read-more{to="/docs/guide/going-further/hooks#server-hooks-runtime"} diff --git a/docs/7.migration/2.configuration.md b/docs/7.migration/2.configuration.md index 13508d7339f1..3ab379b618b8 100644 --- a/docs/7.migration/2.configuration.md +++ b/docs/7.migration/2.configuration.md @@ -11,7 +11,7 @@ The starting point for your Nuxt app remains your `nuxt.config` file. Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/jiti) and [`unjs/c12`](https://github.com/unjs/c12). :: -### Migration +### Миграция 1. You should migrate to the new `defineNuxtConfig` function that provides a typed configuration schema. @@ -115,7 +115,7 @@ Nuxt has built-in support for loading `.env` files. Avoid directly importing it Nuxt and Nuxt Modules are now build-time-only. -### Migration +### Миграция 1. Move all your `buildModules` into `modules`. 2. Check for Nuxt 3 compatibility of modules. @@ -150,7 +150,7 @@ You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/conc Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxi typecheck` command. :: -### Migration +### Миграция 1. Create a `tsconfig.json` with the following content: diff --git a/docs/7.migration/3.auto-imports.md b/docs/7.migration/3.auto-imports.md index b0ca8ff3f4fd..62aea394b510 100644 --- a/docs/7.migration/3.auto-imports.md +++ b/docs/7.migration/3.auto-imports.md @@ -1,18 +1,18 @@ --- -title: Auto Imports -description: Nuxt 3 adopts a minimal friction approach, meaning wherever possible components and composables are auto-imported. +title: Автоматические импорты +description: Nuxt 3 применяет подход с минимальными сложностями, что означает, что где это возможно, компоненты и композаблы автоматически импортируются. --- ::note -In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/docs/migration/configuration#typescript) to use Nuxt's TypeScript support. +В остальной документации по миграции вы заметите, что ключевые утилиты Nuxt и Vue не имеют явных импортов. Это не опечатка; Nuxt автоматически импортирует их для вас, и вы должны получить полные подсказки типов, если вы следовали [инструкциям](/docs/migration/configuration#typescript) по использованию поддержки TypeScript в Nuxt. :: -[Read more about auto imports](/docs/guide/concepts/auto-imports) +[Подробнее об автоматических импортах](/docs/guide/concepts/auto-imports) -## Migration +## Миграция -1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/guide/directory-structure/components) for more information. +1. Если вы использовали `@nuxt/components` в Nuxt 2, вы можете удалить `components: true` в своем `nuxt.config`. Если у вас была более сложная настройка, то обратите внимание, что опции компонентов немного изменились. Подробнее см. в [документации по компонентам](/docs/guide/directory-structure/components). ::tip -You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports. +Вы можете посмотреть `.nuxt/types/components.d.ts` и `.nuxt/types/imports.d.ts` чтобы увидеть, как Nuxt разрешил ваши компоненты и автоматические импорты композаблов. :: diff --git a/docs/7.migration/4.meta.md b/docs/7.migration/4.meta.md index d07ec8193da2..6416a273896d 100644 --- a/docs/7.migration/4.meta.md +++ b/docs/7.migration/4.meta.md @@ -16,7 +16,7 @@ Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage yo :read-more{to="/docs/getting-started/seo-meta"} -## Migration +## Миграция 1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.) 2. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/api/composables/use-head) . You might also consider using the built-in meta-components. diff --git a/docs/7.migration/5.plugins-and-middleware.md b/docs/7.migration/5.plugins-and-middleware.md index cbc31d0e2588..9cc7433ad9c2 100644 --- a/docs/7.migration/5.plugins-and-middleware.md +++ b/docs/7.migration/5.plugins-and-middleware.md @@ -1,26 +1,26 @@ --- -title: Plugins and Middleware -description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 plugins and middleware.' +title: Плагины и Middleware +description: 'Узнайте, как мигрировать плагины и middleware с Nuxt 2 на Nuxt 3.' --- -## Plugins +## Плагины -Plugins now have a different format, and take only one argument (`nuxtApp`). +Плагины теперь имеют другой формат и принимают только один аргумент (`nuxtApp`). ::code-group ```js [Nuxt 2] export default (ctx, inject) => { - inject('injected', () => 'my injected function') + inject('injected', () => 'моя инжектируемая функция') }) ``` ```ts [Nuxt 3] export default defineNuxtPlugin(nuxtApp => { - // now available on `nuxtApp.$injected` - nuxtApp.provide('injected', () => 'my injected function') + // теперь доступно в `nuxtApp.$injected`. + nuxtApp.provide('injected', () => 'моя инжектируемая функция') - // You can alternatively use this format, which comes with automatic type support + // В качестве альтернативы можно использовать этот формат, который поставляется с автоматической поддержкой типов return { provide: { injected: () => 'my injected function' @@ -34,23 +34,23 @@ export default defineNuxtPlugin(nuxtApp => { :read-more{to="/docs/guide/directory-structure/plugins"} ::read-more{to="/docs/api/composables/use-nuxt-app"} -Read more about the format of `nuxtApp`. +Узнайте больше о формате `nuxtApp`. :: -### Migration +### Миграция -1. Migrate your plugins to use the `defineNuxtPlugin` helper function. -2. Remove any entries in your `nuxt.config` plugins array that are located in your `plugins/` folder. All files in this directory at the top level (and any index files in any subdirectories) will be automatically registered. Instead of setting `mode` to `client` or `server`, you can indicate this in the file name. For example, `~/plugins/my-plugin.client.ts` will only be loaded on client-side. +1. Мигрируйте свои плагины, используя вспомогательную функцию `defineNuxtPlugin`. +2. Удалите любые записи в массиве `plugins` вашего `nuxt.config`, которые расположены в вашей папке `plugins/`. Все файлы в этом каталоге на верхнем уровне (и любые индексные файлы в любых подкаталогах) будут автоматически зарегистрированы. Вместо установки `mode` в `client` или `server`, вы можете указать это в имени файла. Например, `~/plugins/my-plugin.client.ts` будет загружен только на клиенте. ## Route Middleware -Route middleware has a different format. +Middleware для маршрутов имеет другой формат. ::code-group ```js [Nuxt 2] export default function ({ store, redirect }) { - // If the user is not authenticated + // Если пользователь не авторизован if (!store.state.authenticated) { return redirect('/login') } @@ -68,13 +68,13 @@ export default defineNuxtRouteMiddleware((to, from) => { :: -Much like Nuxt 2, route middleware placed in your `~/middleware` folder is automatically registered. You can then specify it by name in a component. However, this is done with `definePageMeta` rather than as a component option. +Подобно Nuxt 2, middleware для маршрутов, размещенное в вашей папке `~/middleware`, регистрируется автоматически. Затем вы можете указать его по имени в компоненте. Однако, это делается с помощью `definePageMeta`, а не как опция компонента. -`navigateTo` is one of a number of route helper functions. +`navigateTo` - это одна из нескольких вспомогательных функций для маршрутов. :read-more{to="/docs/guide/directory-structure/middleware"} -### Migration +### Миграция -1. Migrate your route middleware to use the `defineNuxtRouteMiddleware` helper function. -1. Any global middleware (such as in your `nuxt.config`) can be placed in your `~/middleware` folder with a `.global` extension, for example `~/middleware/auth.global.ts`. +1. Перенесите свою middleware для маршрутов, используя вспомогательную функцию `defineNuxtRouteMiddleware`. +2. Любая глобальная middleware (например, в вашем `nuxt.config`) можно разместить в вашей папке `~/middleware` с расширением `.global`, например `~/middleware/auth.global.ts`. diff --git a/docs/7.migration/6.pages-and-layouts.md b/docs/7.migration/6.pages-and-layouts.md index a4ccb5e391b6..676f41d80b9d 100644 --- a/docs/7.migration/6.pages-and-layouts.md +++ b/docs/7.migration/6.pages-and-layouts.md @@ -17,7 +17,7 @@ This file is a great place to put any custom code that needs to be run once when :link-example{to="/docs/examples/hello-world"} -### Migration +### Миграция Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/guide/directory-structure/app). @@ -29,7 +29,7 @@ In Nuxt 2, the `` component is used within a layout to render the current You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `layouts/customLayout.vue` becomes `custom-layout` when referenced in your page. -### Migration +### Миграция 1. Replace `` with `` ```diff [layouts/custom.vue] @@ -91,7 +91,7 @@ If you have been defining transitions for your page or layout directly in your c :read-more{to="/docs/getting-started/transitions"} -### Migration +### Миграция 1. Rename any pages with dynamic parameters to match the new format. 2. Update `` and `` to be ``. diff --git a/docs/7.migration/7.component-options.md b/docs/7.migration/7.component-options.md index ced74743cb11..894e431d3e60 100644 --- a/docs/7.migration/7.component-options.md +++ b/docs/7.migration/7.component-options.md @@ -60,7 +60,7 @@ You can now use `post` inside of your Nuxt 3 template, or call `refresh` to upda Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/api/composables/use-async-data) replaces both hooks and is more customizable; it can do more than simply fetching data from an endpoint. [`useFetch`](/docs/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) for simply fetching data from an endpoint. :: -### Migration +### Миграция 1. Replace the `asyncData` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your page/component. 2. Replace the `fetch` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your component. diff --git a/docs/7.migration/8.runtime-config.md b/docs/7.migration/8.runtime-config.md index 1cf95231c054..97318c11f46f 100644 --- a/docs/7.migration/8.runtime-config.md +++ b/docs/7.migration/8.runtime-config.md @@ -1,29 +1,29 @@ --- -title: Runtime Config -description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 runtime config.' +title: Runtime конфигурация +description: 'Узнайте, как мигрировать с Nuxt 2 на Nuxt 3 конфигурацию runtime.' --- -If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config. +Если вы хотите ссылаться на переменные окружения внутри вашего приложения Nuxt 3, вам понадобится использовать runtime-конфигурацию. -When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin). +При ссылке на эти переменные внутри ваших компонентов, вам понадобится использовать композабл [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) в вашем setup-хуке (или плагине Nuxt). -In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) without any import. +В `server/` части вашего приложения, вы можете использовать [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) без каких-либо импортов. :read-more{to="/docs/guide/going-further/runtime-config"} -## Migration +## Миграция -1. Add any environment variables that you use in your app to the `runtimeConfig` property of the `nuxt.config` file. -2. Migrate `process.env` to [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) throughout the Vue part of your app. +1. Добавьте любые переменные окружения, которые вы используете в своем приложении, в свойство `runtimeConfig` файла `nuxt.config`. +2. Замените `process.env` на [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) во всех Vue-частях вашего приложения. ::code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ runtimeConfig: { - // Private config that is only available on the server + // Конфигурация для приватного использования, доступная только на сервере apiSecret: '123', - // Config within public will be also exposed to the client + // Конфигурация внутри public будет также доступна клиенту public: { apiBase: '/api' } @@ -35,7 +35,7 @@ export default defineNuxtConfig({ ``` @@ -43,14 +43,14 @@ console.log(config.public.apiBase) ```ts [server/api/hello.ts] export default defineEventhandler((event) => { const config = useRuntimeConfig(event) - // In server, you can now access config.apiSecret, in addition to config.public + // На стороне сервера можно получить доступ к config.apiSecret, в дополнение к config.public console.log(config.apiSecret) console.log(config.public.apiBase) }) ``` ```ini [.env] -# Runtime config values are automatically replaced by matching environment variables at runtime +# Значения конфигурации runtime автоматически заменяются соответствующими переменными окружения runtime NUXT_API_SECRET=api_secret_token NUXT_PUBLIC_API_BASE=https://nuxtjs.org ```