Шаблоны

Nuxt.js позволяет расширять основной шаблон и создавать собственные, просто добавляя их в папку layouts.

Основной шаблон

Вы можете расширить основной шаблон, добавив файл layouts/default.vue.

Убедитесь в том, что компонент <nuxt/> прописан в шаблоне страницы.

Код обычного шаблона таков:

<template>
  <nuxt/>
</template>

Страница ошибки

Вы можете изменить страницу ошибки, добавив файл layouts/error.vue.

Шаблон страницы ошибки — специальный шаблон, поскольку компонент <nuxt/> не должен присутствовать в нём. Представляйте себе этот шаблон как отдельный компонент, который отображается во время возникновения ошибки (404, 500, т.п.)

Исходный код для стандартной страницы ошибки доступен на Гитхабе.

Пример кода страницы ошибки в layouts/error.vue:

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Страница не найдена</h1>
    <h1 v-else>Произошла ошибка</h1>
    <nuxt-link to="/">Вернуться на главную</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error']
}
</script>

Индивидуальный шаблон

Каждый файл первого уровня в папке layouts будет создавать индивидуальный шаблон, доступный через свойство layout в компоненте страницы.

Убедитесь в том, что компонент <nuxt> прописан в шаблоне страницы.

Пример шаблона в layouts/blog.vue:

<template>
  <div>
    <h1>Мой блог</h1>
    <nuxt/>
  </div>
</template>

Затем в pages/posts.vue вы можете сказать Nuxt.js использовать созданный шаблон:

<script>
export default {
  layout: 'blog'
}
</script>

Смотрите живой пример в демонстрационном видео.

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!