Componentes da Nuxt

A Nuxt vem com alguns componentes importantes incluídos de imediato, que serão úteis na construção da nossa aplicação. Os componentes estão disponíveis globalmente, o que significa que não precisamos de os importar para os utilizar.

Nos parágrafos seguintes, cada um dos componentes incluídos é explicado.

O Componente Nuxt

O componente <Nuxt> é o componente que usamos para exibir os componentes da nossa página. Basicamente, este componente é substituído pelo que está dentro dos nossos componentes de página, dependendo da página que está a ser mostrada. Por isto, é importante adicionarmos o componente <Nuxt> às nossas disposições:

<template>
  <div>
    <div>My nav bar</div>
    <Nuxt />
    <div>My footer</div>
  </div>
</template>

O componente <Nuxt> pode receber a propriedade de nuxt-child-key. Esta propriedade será passada para <RouterView> para as nossas transições funcionarem corretamente dentro das páginas dinâmicas.

Existem 2 maneiras de manipular a propriedade interna key do <RouterView>.

1. Usar uma propriedade nuxtChildKey no nosso componente <Nuxt>:

<template>
  <div>
    <Nuxt :nuxt-child-key="someKey" />
  </div>
</template>

2. Adicionar a opção key nos componentes de página como string ou function:

export default {
  key(route) {
    return route.fullPath
  }
}

O Componente NuxtChild

Este componente é utilizado para apresentar os componentes filhos numa rota encaixada.

Exemplo:

-| pages/
---| parent/
------| child.vue
---| parent.vue

Esta árvore de ficheiros gerará estas rotas:

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

Para exibir o componente child.vue, temos que inserir o componente <NuxtChild> dentro de pages/parent.vue:

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtChild :foobar="123" />
  </div>
</template>

keep-alive

Ambos, o componente <Nuxt> e o componente <NuxtChild/>, aceitam keep-alive e keep-alive-props.

<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- será convertido para algo como isto -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- será convertido para algo como isto -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

Os componentes <NuxtChild> também podem receber propriedades como um componente .vue formal:

<template>
  <div>
    <NuxtChild :key="$route.params.id" />
  </div>
</template>

Para ver um exemplo, consultar o exemplo de rotas encaixadas .

O Componente NuxtLink

Para navegar entre as páginas da nossa aplicação, devemos utilizar o componente <NuxtLink>. Este componente está incluído na Nuxt, pelo que não temos de o importar como fazemos com os outros componentes. É semelhante ao marcador de hipertexto <a> exceto que em vez de utilizar href="/about" utilizamos to="/about". Se já utilizamos o vue-loader antes, podemos pensar no <NuxtLink> como um substituto do <RouterLink>.

Uma simples hiperligação para a página index.vue na nossa pasta pages:

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

O componente <NuxtLink> deve ser utilizado para todas as hiperligações internas. Isto significa que para todas as hiperligações para as páginas do nosso sítio, devemos usar <NuxtLink>. O marcador <a> deve ser utilizado para todas as hiperligações externas. Isto significa que se tivermos hiperligações para outros sítios da Web, devemos utilizar o marcador <a> para essas hiperligações:

<template>
  <div>
    <h1>Home page</h1>
    <NuxtLink to="/about"
      >About (internal link that belongs to the Nuxt App)</NuxtLink
    >
    <a href="https://v2.nuxt.com">External Link to another page</a>
  </div>
</template>

prefetchLinks

A Nuxt inclui automaticamente a pré-requisição inteligente de dados. Isto significa que deteta quando uma hiperligação está visível, quer na janela de visualização, quer ao deslocar-se, e prepara previamente o código de JavaScript para essas páginas, para estarem prontas quando o utilizador clicar na hiperligação. A Nuxt só carrega os recursos quando o navegador não está ocupado e salta a pré-requisição de dados se a nossa conexão estiver desligada da rede ou se só tivermos uma conexão de 2G.

Desativar a Pré-requisição de Dados de Hiperligações Específicas

No entanto, por vezes podemos querer desativar a pré-requisição em algumas hiperligações se a nossa página tiver muito JavaScript, ou se tivermos muitas páginas diferentes que seriam pré-carregadas, ou se tivermos muitos programas de terceiros que precisam de ser carregados. Para desativar a pré-requisição numa hiperligação específica, podemos usar a propriedade no-prefetch. Desde a Nuxt v2.10.0, também podemos usar a propriedade prefetch definida como false:

<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

Desativar a Pré-requisição de Dados Globalmente

Para desativar a pré-requisição de dados de todas as hiperligações, definimos prefetchLinks para false:

export default {
  router: {
    prefetchLinks: false
  }
}

Desde a Nuxt v2.10.0, se tivermos definido prefetchLinks como false, mas quisermos pré-requisitar dados duma hiperligação específica, podemos usar a propriedade prefetch:

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>

linkActiveClass

A classe linkActiveClass funciona da mesma maneira que a classe da vue-router para hiperligações ativas. Se quisermos mostrar quais as hiperligações que estão ativas, tudo o que temos de fazer é criar alguma folha de estilo para a classe nuxt-link-active:

.nuxt-link-active {
  color: red;
}

Se quisermos, também podemos configurar o nome da classe para ser outra coisa. Podemos fazer isto ao modificar a linkActiveClass na propriedade router no nosso ficheiro nuxt.config.js:

export default {
  router: {
    linkActiveClass: 'my-custom-active-link'
  }
}

linkExactActiveClass

A classe linkExactActiveClass funciona da mesma maneira que a classe da vue-router para as hiperligações ativas exatas. Se quisermos mostrar quais as hiperligações que estão ativas com uma correspondência exata, tudo o que temos de fazer é criar alguma folha de estilo para a classe nuxt-link-exact-active:

.nuxt-link-exact-active {
  color: green;
}

Se quisermos, também podemos configurar o nome da classe para ser outra coisa. Podemos fazer isto ao modificar a linkExactActiveClass na propriedade router no nosso ficheiro nuxt.config.js:

export default {
  router: {
    linkExactActiveClass: 'my-custom-exact-active-link'
  }
}

linkPrefetchedClass

A classe linkPrefetchedClass nos permitirá adicionar estilos a todas as hiperligações que foram pré-carregadas. Isto é ótimo para testar quais hiperligações são pré-requisitadas após modificar o comportamento predefinido. A linkPrefetchedClass está desativada por predefinição. Se quisermos ativá-la, precisamos de adicioná-la à propriedade router no nosso ficheiro nuxt.config.js:

export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

Em seguida, podemos adicionar os estilos a esta classe:

.nuxt-link-prefetched {
  color: orangeRed;
}

O Componente client-only

Este componente é utilizado para desenhar intencionalmente um componente apenas no lado do cliente. Para importar um componente apenas no cliente, registamos o componente numa extensão apenas do lado do cliente:

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- este componente será apenas desenhado no lado do cliente -->
      <comments />
    </client-only>
  </div>
</template>

Utilizamos uma ranhura como marcadora de posição até o <client-only /> ser montado no lado do cliente:

<template>
  <div>
    <sidebar />
    <client-only>
      <!-- este componente será apenas desenhado no lado do cliente -->
      <comments />

      <!-- indicador de carregamento, desenhado no lado do servidor -->
      <template #placeholder>
        <comments-placeholder />        
      </template>
    </client-only>
  </div>
</template>

mounted(){
  this.initClientOnlyComp()
},
methods: {
  initClientOnlyComp(count = 10) {
    this.$nextTick(() => {
      if (this.$refs.myComp) {
        //...
      } else if (count > 0) {
        this.initClientOnlyComp(count - 1);
      }
    });
  },
}