Diretório de Páginas

O diretório pages contém as visões e rotas da nossa aplicação. A Nuxt lê todos os ficheiros .vue dentro deste diretório e cria automaticamente a configuração do roteador para nós.

Cada componente de página é um componente .vue, mas a Nuxt acrescenta atributos e funções especiais para facilitar o máximo possível o desenvolvimento da nossa aplicação universal:

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

<script>
  export default {
    // as propriedades da página estarão neste objeto.
  }
</script>

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

Páginas Dinâmicas

As páginas dinâmicas podem ser criadas quando não sabemos o nome da página devido ao fato de ser proveniente duma interface de programação de aplicação, ou quando não queremos ter de criar a mesma página vezes sem conta. Para criar uma página dinâmica, temos de adicionar um sublinhado antes do nome do ficheiro .vue, ou antes, do nome do diretório, se quisermos que o diretório seja dinâmico. Podemos dar ao ficheiro ou diretório o nome que quisermos, mas temos de o prefixar com um sublinhado.

Se tivermos definido um ficheiro chamado _slug.vue na nossa pasta pages, podemos acessar o valor ao utilizar o contexto com a params.slug:

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

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // Ao chamar `/abc`, a `slug` será "abc".
      return { slug }
    }
  }
</script>

Se definimos um ficheiro chamado _slug.vue numa pasta chamada _book podemos acessar o valor ao utilizar o contexto com params.slug e params.book:

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

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

Propriedades

asyncData

A asyncData é chamada todas as vezes antes de carregar o componente. Esta pode ser assíncrono e recebe o contexto como argumento. O objeto retornado será fundido com o nosso objeto de dados:

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

fetch

Sempre que precisarmos de obter dados assíncronos, podemos utilizar a fetch. A fetch é chamada no lado do servidor ao desenhar a rota e no lado do cliente ao navegar:

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

head

Define os marcadores de <meta> específicos para a página atual. A Nuxt utiliza a vue-meta para atualizar o cabeçalho do documento e meta-atributos da nossa aplicação:

export default {
  head() {
    // Definir meta-marcadores para esta página.
  }
}

layout

Especifica uma disposição no diretório de disposições (layouts/):

export default {
  layout: 'blog'
}

loading

Se definida como false, impedi que uma página chame automaticamente this.$nuxt.$loading.finish() quando entramos nela e this.$nuxt.$loading.start() quando saímos dela, permitindo-nos controlar manulamente o comportamento, como mostra este exemplo :

export default {
  loading: false
}

transition

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

export default {
  transition: 'fade'
}

scrollToTop

A propriedade scrollToTop permite-nos dizer a Nuxt para deslocar até o topo antes de desenhar a página. Por predefinição, a Nuxt desloca-se para o topo quando vamos a outra página, mas com as rotas filhas (secundárias), a Nuxt mantém a posição da deslocação. Se quisermos dizer a Nuxt para deslocar para o topo ao desenhar a nossa rota filha, definimos scrollToTop como true:

export default {
  scrollToTop: true
}

Por outro lado, também podemos definir manualmente scrollTopTop para false nas rotas pai (primárias).

Se quisermos sobrescrever o comportamento do deslocamento predefinido da Nuxt, podemos olhar a opção scrollBehavior .

middleware

Define o intermediário para esta página. O intermediário será chamado antes de desenhar a página:

export default {
  middleware: 'auth'
}

A Propriedade watchQuery

Utilizamos a chave watchQuery para definir um observador para as sequências de caracteres de consulta. Se as sequências de caracteres definidas mudarem, todos os métodos do componente (asyncData, fetch(context), validate, layout, ...) serão chamados. A observação está desativada por predefinição para melhorar o desempenho:

export default {
  watchQuery: ['page']
}

export default {
  watchQuery: true
}

Também podemos usar a função watchQuery(newQuery, oldQuery) para termos observadores mais refinados:

export default {
  watchQuery(newQuery, oldQuery) {
    // Só executa os métodos do componente se sequência de caracteres antiga contiver `bar`
    // e a nova sequência de caracteres de consulta contém `foo`
    return newQuery.foo && oldQuery.bar
  }
}

key

Da mesma maneira que a propriedade key que pode ser usada em componentes .vue em modelos de marcação de hipertexto como uma dica para o modelo de objeto do documento virtual, esta propriedade permite que o valor da chave seja definido a partir da própria página (em vez do componente pai (primário)).

Por predefinição, na Nuxt, este valor será a $route.path, o que significa que navegar 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 primeiro argumento.

Ignorar Páginas

Se quisermos ignorar páginas para estas não serem incluídas no ficheiro router.js gerado, então podemos ignorá-las prefixando-as com um -.

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

Configuração

Podemos renomear o diretório pages/ para algo diferente ao definir a opção dir.pages:

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