Componentes do Nuxt

O Nuxt vem com alguns componentes importantes incluídos fora da caixa, os quais serão úteis quando estiver construindo sua aplicação. Os componentes estão disponíveis globalmente, o que significa que você não precisa importar eles no sentido de usar eles.

Dentro dos parágrafos seguintes, cada componente incluído é explicado.

O Componente Nuxt

O componente <Nuxt> é o componente que você usa para exibir seus componentes de página. Basicamente, este componente é substituído pelo que está dentro dos componentes de página dependendo da página que está sendo exibida. Daí, é importante que você adicione o componente <Nuxt> aos seus esquemas.

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

O componente <Nuxt> pode carregar a propriedade nuxt-child-key. Esta propriedade será passada para <RouterView>, assim suas transições funcionarão corretamente dentro das páginas dinâmicas.

Há 2 maneiras de manipular a propriedade interna key de <RouterView>.

1. Use uma propriedade nuxtChildKey no seu componente <Nuxt>

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

2. Adicione a opção key como string ou função dentro dos componentes de página

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

O Componente NuxtChild

Este componente é usado para exibição dos componentes filhos dentro de uma rota aninhada.

Example:

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

Esta árvore de ficheiro 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 , você tem de 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 em alguma coisa parecida com isto -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

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

<!-- será convertido em alguma coisa parecida com isto -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

Os componentes <NuxtChild> pode também receber propriedades como um componente normal do Vue.

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

Pare ver um exemplo, dê uma vista de olhos ao exemplo de rotas-aninhadas .

O Componente NuxtLink

Para navegar entre as páginas da sua aplicação, você deve usar o componente <NuxtLink> . Este componente está incluído com Nuxt e assim você não tem de importar ele como você faz com outros componentes. É similar a tag <a> do HTML exceto que ao invés de usar o href="/about" você usa to="/about". Se você já usou o vue-router antes, você pode pensar do <NuxtLink> como uma substituição do <RouterLink>.

Uma simples ligação para a página index.vue dentro da sua pasta pages:

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

O componente <NuxtLink> deve ser usado para todas ligações internas. Isso significa que todas as ligações para as páginas dentro do seu site você deve usar o <NuxtLink>. A tag <a> deve ser usada para todas ligações externas. Isso significa que se você tiver ligações para outros websites você deve usar a tag <a> para esses.

<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>

Pré-requisitar Ligações

O Nuxt automaticamente incluí pré-requisição inteligente. Isso significa que ele detecta quando uma ligação está visível, seja dentro da viewport ou quando estiver rolando na tela e pré-requisita o JavaScript para aquelas páginas assim que eles estiverem prontas quando o usuário clicar na ligação. O Nuxt apenas carrega os recursos quando o browser não estiver ocupado e pula a pré-requisição se a sua conexão estiver offline ou se você apenas tiver uma conexão 2G.

Desativa a Pré-requisição para Ligações Específicas

No entanto algumas vezes você pode querer desativar a pré-requisição em algumas ligações se sua página tiver muito JavaScript ou você tiver muitas páginas diferentes que seriam pré-requisitadas ou você tiver muitos scripts de terceiros que precisam ser carregados. Para desativar a pré-requisição em uma ligação específica, você pode usar a propriedade no-prefetch . Desde o Nuxt v2.10.0, você também pode usar a propriedade prefetch definida para 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 Globalmente

Para desativar a pré-requisição em todas ligações, defina o prefetchLinks para false:

export default {
  router: {
    prefetchLinks: false
  }
}

Desde o Nuxt v2.10.0, se você tiver definido prefetchLinks para false mas você quiser pré-requisitar uma ligação específica, você pode usar a propriedade prefetch :

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

linkActiveClass (classe da ligação ativa)

A linkActiveClass funciona da mesma forma que a classe do vue-router para ligações ativas. Se quisermos mostrar quais ligações são ativada, tudo que você tem de fazer é criar algum CSS para a classe nuxt-link-active.

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

Se você quiser, você pode também configurar o nome da classe para alguma coisa que você queira. Você pode fazer isso ao modificar a propriedade linkActiveClass dentro da propriedade router dentro do seu ficheiro nuxt.config.js.

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

linkExactActiveClass (classe da ligação exata ativa)

O linkExactActiveClass funciona da mesma forma que a classe do vue-router para ligações exatas ativas. Se quisermos mostrar quais ligações são ativas com um correspondente exato, todo que você tem de fazer é criar algum CSS para a classe nuxt-link-exact-active.

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

Se você quiser, você pode também configurar o nome da classe para alguma coisa que você queira. Você pode fazer isso ao modificar a propriedade linkExactActiveClass dentro da propriedade router dentro do seu ficheiro nuxt.config.js.

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

linkPrefetchedClass (classe da ligação pré-requisitada)

O linkPrefetchedClass permitirá você adicionar estilos para todas ligações que têm de ser pré-requisitados. Isto é genial para testar quais ligações estão sendo pré-requisitadas depois de modificar o comportamento padrão. O linkPrefetchedClass está desativado por padrão. Se você quiser ativar ele você precisa adicionar ele à propriedade router dentro do seu ficheiro nuxt.config.js.

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

Depois você pode adicionar estilos para aquela classe.

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

O Componente client-only

Este componente é usado para propositadamente renderizar um componente somente no lado do cliente. Para importar um componente somente no cliente, registe o componente dentro de um plugin somente no lado do cliente.

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

Use um slot como um placeholder até <client-only /> ser montado no lado do cliente.

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

      <!-- indicador de carregamento, renderizado 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);
      }
    });
  },
}