Страницы

Папка pages позволяет создавать любой вид маршрута, просто создавая Vue-файлы. Эти компоненты обладают свойствами, с помощью которых можно легко создавать и поддерживать приложение.

Специальные атрибуты

Каждая страница — это компонент Vue, но Nuxt.js ещё добавляет и специальные ключи, чтобы сделать процесс разработки приложения как можно проще.

Список всех доступных атрибутов

Атрибут Описание
data Самый важный ключ, с тем же предназначением, что и Vue data, но может быть асинхронным и принимать контекст в виде аргумента. Пожалуйста, прочитайте про асинхронные данные, чтобы понять, как именно это работает.
fetch Используется для заполнения хранилища перед рендерингом страницы. Примерно как метод data, за исключением того, что значение data у компонента в данном случае не устанавливается. См. метод fetch.
layout Назначает шаблон, определённый в папке layouts. См. шаблоны.
transition Устанавливает переход для страницы. См. переходы маршрутов.
scrollToTop Булевское значение, по-умолчанию — false. Используйте, если страница должна проскроллиться наверх перед рендерингом. Используется для вложенных маршрутов.
validate Функция-валидатор для динамического маршрута.
middleware Устанавливает промежуточный код для конкретной страницы, который выполняется перед рендерингом страницы. См промежуточный код маршрутов.

Простая страница

Компонент страницы — это компонент Vue с дополнительной супер-силой. Сперва, давайте создадим простой компонент, показывающий красный заголовок "Hello World!"

Назовём первую страницу pages/index.vue:

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  data () {
    return { name: 'World' }
  }
}
</script>

<style>
.red {
  color: red;
}
</style>

Использование пре-процессоров

Благодаря vue-loader вы можете использовать любой тип пре-процессоров для <template>, <script> or <style>, просто добавив к ним атрибут lang.

Например, наша страница pages/index.vue будет использовать Pug, CoffeeScript и Sass:

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<script lang="coffee">
module.exports = data: ->
  { name: 'World' }
</script>

<style lang="sass">
.red
  color: red
</style>

Чтобы использовать пре-процессоры, нужно просто установить их загрузчики для webpack:

npm install --save-dev pug@2.0.0-beta6 pug-loader coffee-script coffee-loader node-sass sass-loader

Использование JSX

Чтобы использовать JSX в компонентах, установите плагин Babel для JSX:

npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props

Затем добавьте название плагина transform-vue-jsx в nuxt.config.js:

module.exports = {
  build: {
    babel: {
      plugins: ['transform-vue-jsx']
    }
  }
}

Чтобы узнать больше об опции babel, прочитайте конфигурацию build.

Теперь вы можете использовать JSX в методе render у компонентов.

<script>
export default {
  data () {
    return { name: 'World' }
  },
  render (h) {
    return <h1 class="red">{this.name}</h1>
  }
}
</script>

Узнайте больше в разделе JSX документации к Vue.js.

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