O diretório pages

O diretório pages contém as views e rotas da sua aplicação. O Nuxt lê todos os ficheiros .vue dentro deste diretório e cria automaticamente a configuração do router por você.

Todo componente de página é um componente Vue mas o Nuxt adiciona atributos e funções especiais para tornar o desenvolvimento da sua aplicação universal o mais fácil possível.

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

<script>
  export default {
    // as propriedades da página vão aqui
  }
</script>

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

Páginas dinâmicas

As páginas dinâmicas podem ser criadas quando você não sabe o nome da página devido ao fato dela vir de uma API ou você não quer ter de criar a mesma página uma vez a outra. Para criar uma página dinâmica você precisa adicionar um sublinhado antes do nome do ficheiro .vue ou antes do nome do diretório, se você quiser que o diretório seja dinâmico. Você pode nomear o ficheiro ou diretório com o que você quiser mas você deve adicionar um prefixo nele com um sublinhado.

Se você tiver definido um ficheiro nomeado como _slug.vue dentro da sua pastas pages, você pode acessar o valor usando o contexto com o params.slug.

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // Quando estiver chamando /abc o slug será "abc"
      return { slug }
    }
  }
</script>

Se você tiver definido um ficheiro nomeado como _slug.vue dentro de uma pasta chamada _hook você pode acessar o valor usando o contexto com o params.slug e o params.book

<template>
  <h1>{{ this.book }} / {{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const book = params.book
      const slug = params.slug
      return { book, slug }
    }
  }
</script>

Propriedades

A propriedade asyncData

O asyncData é chamado toda vez antes do componente de carregamento. Ele pode ser assíncrono e receber o contexto como um argumento. O objeto retornado será combinado com o seu objeto data.

export default {
  asyncData(context) {
    return { name: 'World' }
  }
}

A propriedade fetch

Toda vez que você precisar receber dados assíncronos você pode usar o fetch. O fetch é chamado no lado do servidor quando estiver renderizando a rota, e no lado do cliente quando estiver navegando.

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
        res.json()
      )
    }
  }
</script>

A propriedade head

Definir marcadores de <meta> específicas para página atual. O Nuxt usa o vue-meta para atualizar o head e meta atributos do documento da sua aplicação.

export default {
  head() {
    // Defina os marcadores de meta para esta página
  }
}

A propriedade layout

Específica um esquema definido dentro do diretório de layouts.

export default {
  layout: 'blog'
}

A propriedade loading

Se definido para false, previne que uma página de automaticamente chamar this.$nuxt.$loading.finish() assim que você entrar nela e this.$nuxt.$loading.start() assim que você sair dela, permitindo que você manualmente controle o comportamento, assim como é mostrado no exemplo .

export default {
  loading: false
}

A propriedade transition

Define uma transição específica para a página.

export default {
  transition: 'fade'
}

A propriedade scrollToTop

A propriedade scrollToTop permite você dizer ao Nuxt para rolar a página até ao topo antes da renderização da página. Por padrão, o Nuxt rola para o topo quando você vai para uma outra página, mas com as rotas filhas, o Nuxt mantém a posição da rolagem. Se você quiser dizer ao Nuxt para rolar para o topo quando estiver renderizando sua rota filha, defina scrollToTop para true

export default {
  scrollToTop: true
}

Pelo contrário, você pode manualmente definir scrollToTop para false no pai das rotas também.

Se você quiser sobrescrever o comportamento padrão de rolagem do Nuxt, de uma vista de olhos na opção scrollBehavior .

A propriedade middleware

Define um intermediário para esta página. O intermediário será chamado antes da renderização da página.

export default {
  middleware: 'auth'
}

A propriedade watchQuery (observar consulta)

Use a chave watchQuery para definir um observador para as strings da consulta. Se a string definida mudar, todos os métodos do componente (asyncData, fetch(context), validate, layout, ...) serão chamados. A observação está desativada por padrão para melhorar a performance.

export default {
  watchQuery: ['page']
}

export default {
  watchQuery: true
}

Você pode também usar a função watchQuery(newQuery, oldQuery) para ter observadores mais refinados.

export default {
  watchQuery(newQuery, oldQuery) {
    // Apenas execute os métodos do componente se a antiga sequência de caracteres da consulta conter `bar`
    // e a nova sequência de caracteres da consulta conter `foo`
    return newQuery.foo && oldQuery.bar
  }
}

A propriedade key

O mesmo é com a propriedade key que pode ser usada nos componentes Vue dentro dos modelos como uma dica para a DOM virtual, esta propriedade permite que a chave e valor sejam definidas a partir da própria página (em vez do componente pai).

Por padrão dentro Nuxt, este valor será o $route.path, querendo dizer que a navegação para uma rota diferente garantirá que um componente de página limpo seja criado. Logicamente equivalente a:

<router-view :key="$route.path" />

A propriedade pode ser uma String ou uma Function que recebe uma rota como o primeiro argumento.

Ignorando páginas

Se você quiser ignorar páginas para que elas não sejam incluídas dentro do ficheiro router.js gerado, então você pode ignorar elas ao prefixar elas com um -.

Por exemplo, pages/-about.vue será ignorada.

Configuração

Você pode renomear o diretório pages/ para alguma coisa diferente ao definir a opção dir.pages:

export default {
  dir: {
    // Renomeia o diretório `pages` para `routes`
    pages: 'routes'
  }
}