Nuxt mid-level certification launch date announced!

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

Узнайте, как мигрировать со страниц и лейаутов Nuxt 2 на Nuxt 3.

app.vue

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

Если у вас нет файла app.vue в директории исходного кода, Nuxt будет использовать свою собственную версию по умолчанию.

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

Узнать больше Docs > Guide > Directory Structure > App.
Прочитайте и отредактируйте живой пример в Docs > Examples > Hello World.

Миграция

Рассмотрите возможность создания файла 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 для установки этих параметров.

Узнать больше Docs > Guide > Directory Structure > Pages#special Metadata.

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

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

Узнать больше Docs > Getting Started > Transitions.

Миграция

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

теперь является полной заменой для всех ссылок, даже для внешних. Вы можете прочитать об этом подробнее и узнать, как расширить его, чтобы предоставить собственный компонент ссылки.
Узнать больше Docs > API > Components > Nuxt Link.

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

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

Убедитесь, что всегда используете await перед navigateTo или chain его результата, возвращая из функций.
<script>
export default {
  methods: {
    navigate(){
      this.$router.push({
        path: '/search',
        query: {
          name: 'имя',
          type: '1'
        }
      })
    }
  }
}
</script>