Skip to content

Commit

Permalink
feat(docs) Перевод Migration (#157)
Browse files Browse the repository at this point in the history
* feat(docs) Перевод Migration

* Update docs/7.migration/5.plugins-and-middleware.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/8.runtime-config.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/8.runtime-config.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/8.runtime-config.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/10.bundling.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/11.server.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/3.auto-imports.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/3.auto-imports.md

Co-authored-by: Artem <[email protected]>

* Update docs/7.migration/5.plugins-and-middleware.md

Co-authored-by: Artem <[email protected]>

* feat(docs) Исправил замечания после ревью

---------

Co-authored-by: Ivan Bochkarev <[email protected]>
Co-authored-by: Artem <[email protected]>
  • Loading branch information
3 people authored Jun 10, 2024
1 parent d8b5d71 commit b568f4c
Show file tree
Hide file tree
Showing 13 changed files with 79 additions and 79 deletions.
18 changes: 9 additions & 9 deletions docs/1.getting-started/12.upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.)

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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).

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion docs/2.guide/1.concepts/7.esm.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion docs/6.bridge/4.plugins-and-middleware.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
})
```
Expand Down
2 changes: 1 addition & 1 deletion docs/6.bridge/6.meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
26 changes: 13 additions & 13 deletions docs/7.migration/10.bundling.md
Original file line number Diff line number Diff line change
@@ -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`.

<!-- TODO: Enabling webpack builder -->
<!-- TODO: Включение конструктора webpack -->
14 changes: 7 additions & 7 deletions docs/7.migration/11.server.md
Original file line number Diff line number Diff line change
@@ -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"}
6 changes: 3 additions & 3 deletions docs/7.migration/2.configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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:

Expand Down
14 changes: 7 additions & 7 deletions docs/7.migration/3.auto-imports.md
Original file line number Diff line number Diff line change
@@ -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 разрешил ваши компоненты и автоматические импорты композаблов.
::
2 changes: 1 addition & 1 deletion docs/7.migration/4.meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
38 changes: 19 additions & 19 deletions docs/7.migration/5.plugins-and-middleware.md
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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')
}
Expand All @@ -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`.
Loading

0 comments on commit b568f4c

Please sign in to comment.