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

app.vue

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

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

Миграция

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

Лейаут

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

В Nuxt 2 для отображения текущей страницы в лейауте используется компонент <Nuxt>. В Nuxt 3 лейауты используют слоты, поэтому вам придется заменить этот компонент на <slot />. Это также позволяет использовать продвинутые случаи использования с именованными и локальными слотами. Подробнее о слоях.

Вам также потребуется изменить способ определения лейаута, используемого страницей, с помощью макроса компилятора 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>
   + definePageMeta({
   +   layout: 'custom'
   + })
   - 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 для установки этих параметров.

Transitions страницы и лейаутов

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

Миграция

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

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

- URL: /users
- Page: /pages/users/index.vue

- URL: /users/some-user-name
- Page: /pages/users/_user.vue
- Usage: params.user

- URL: /users/some-user-name/edit
- Page: /pages/users/_user/edit.vue
- Usage: params.user

- URL: /users/anything-else
- Page: /pages/users/_.vue
- Usage: params.pathMatch

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

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

<script>
export default {
  transition: 'page' // or { name: 'page' }
}
</script>

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

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