Страницы и Лейауты

app.vue

Nuxt 3 предоставляет центральную точку входа в ваше приложение через ~/app.vue.

Этот файл является отличным местом для размещения любого пользовательского кода, который необходимо выполнить один раз при запуске приложения, а также любых компонентов, присутствующих на всех страницах вашего приложения. Например, если у вас есть только один лейаут, вы можете переместить его в app.vue.

Миграция

Создайте app.vue и перенесите в него логику, которая должна выполняться один раз на верхнем уровне приложения. Пример — в справочнике по app.vue.

Лейаут

Если вы используете лейауты в своем приложении для нескольких страниц, требуется внести незначительные изменения.

В Nuxt 2 текущую страницу в лейауте выводит <Nuxt>. В Nuxt 3 лейауты строятся на слотах — замените его на <slot />. Так проще делать именованные слоты и слоты с областью видимости (scoped). Подробнее о лейаутах.

Вам также потребуется изменить способ определения лейаута, используемого страницей, с помощью макроса компилятора definePageMeta. Лейауты будут записаны в kebab-case. Таким образом, layouts/customLayout.vue становится custom-layout при использовании на вашей странице.

Миграция

1. Замените <Nuxt /> на <slot />.
   layouts/custom.vue

     <template>
       <div id="app-layout">
         <main>
   -       <Nuxt />
   +       <slot />
         </main>
       </div>
     </template>
   

2. Используйте definePageMeta, чтобы выбрать лейаут, используемый вашей страницей.
   pages/index.vue

   + <script setup>
   + definePageMeta({
   +   layout: 'custom'
   + })
   - <script>
   - export default {
   -   layout: 'custom'
   - }
     </script>
   

3. Переместите ~/layouts/_error.vue в ~/error.vue. См. документацию по обработке ошибок. Если вы хотите гарантировать, что на этой странице используется лейаут, вы можете использовать <NuxtLayout> непосредственно в error.vue:
   error.vue

   <template>
     <div>
       <NuxtLayout name="default">
         <!-- -->
       </NuxtLayout>
     </div>
   </template>
   

Страницы

Nuxt 3 поставляется с необязательной интеграцией vue-router, которая активируется присутствием директории pages/ в вашей директории с исходниками. Если у вас есть только одна страница, вы можете вместо этого переместить её в app.vue для более лёгкой сборки.

Динамические маршруты

Формат определения динамических маршрутов в Nuxt 3 немного отличается от Nuxt 2, поэтому вам может потребоваться переименовать некоторые файлы в pages/.

1. Там, где раньше использовался _id для определения динамического параметра маршрута, теперь используется [id].
2. Там, где раньше использовался _.vue для определения маршрута со сводным сегментом (catch-all), теперь используется [...slug].vue.

Вложенные маршруты

В Nuxt 2 вы определяли любые вложенные маршруты (с родительскими и дочерними компонентами) с помощью <Nuxt> и <NuxtChild>. В Nuxt 3 они были заменены одним компонентом <NuxtPage>.

Ключи страницы и параметры keep-alive

Если вы передавали настраиваемый ключ страницы или свойства keep-alive компоненту <Nuxt>, теперь вы будете использовать definePageMeta для установки этих параметров.

Переходы страницы и лейаутов

Если вы задавали переходы (transition) для страницы или лейаута в опциях компонента, теперь используйте definePageMeta. С Vue 3 CSS-классы -enter и -leave были переименованы. Свойство style из <Nuxt> больше не применяется к переходу при использовании на <slot>, поэтому перенесите стили в класс -active.

Миграция

1. Переименуйте любые страницы с динамическими параметрами в соответствии с новым форматом.
2. Обновите <Nuxt> и <NuxtChild> до <NuxtPage>.
3. Если вы используете Composition API, вы также можете заменить this.$route и this.$router на композаблы useRoute и useRouter.

Пример: Динамические маршруты

- URL: /users
- Страница: /pages/users/index.vue

- URL: /users/some-user-name
- Страница: /pages/users/_user.vue
- Параметр: params.user

- URL: /users/some-user-name/edit
- Страница: /pages/users/_user/edit.vue
- Параметр: params.user

- URL: /users/anything-else
- Страница: /pages/users/_.vue
- Параметр: params.pathMatch

- URL: /users
- Страница: /pages/users/index.vue

- URL: /users/some-user-name
- Страница: /pages/users/[user].vue
- Параметр: params.user

- URL: /users/some-user-name/edit
- Страница: /pages/users/[user]/edit.vue
- Параметр: params.user

- URL: /users/anything-else
- Страница: /pages/users/[...slug].vue
- Параметр: params.slug

Пример: Вложенные маршруты и definePageMeta

<template>
  <div>
    <NuxtChild
      keep-alive
      :keep-alive-props="{ exclude: ['modal'] }"
      :nuxt-child-key="$route.slug"
    />
  </div>
</template>

<script>
export default {
  transition: 'page', // или { name: 'page' }
}
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<script setup lang="ts">
// Этот макрос компилятора работает как в <script>, так и в <script setup>
definePageMeta({
  // вы также можете передать строку или computed-свойство
  key: route => route.slug,
  transition: {
    name: 'page',
  },
  keepalive: {
    exclude: ['modal'],
  },
})
</script>

Компонент <NuxtLink>

Большая часть синтаксиса и функциональности остаётся прежней для глобального компонента NuxtLink. Если вы использовали сокращённый формат <NLink>, вам следует заменить его на <NuxtLink>.

NuxtLink теперь подходит для всех ссылок, в том числе внешних. Подробнее — в документации: как настроить поведение и заменить компонент ссылки на свой.

Программная навигация

При миграции с Nuxt 2 на Nuxt 3 вам придётся обновить способ программной навигации пользователей. В Nuxt 2 у вас был доступ к Vue Router с помощью this.$router. В Nuxt 3 вы можете использовать утилиту navigateTo(), которая позволяет передать маршрут и параметры во Vue Router.

<script>
export default {
  methods: {
    navigate () {
      this.$router.push({
        path: '/search',
        query: {
          name: 'имя',
          type: '1',
        },
      })
    },
  },
}
</script>

<script setup lang="ts">
function navigate () {
  return navigateTo({
    path: '/search',
    query: {
      name: 'имя',
      type: '1',
    },
  })
}
</script>