Crie sua próxima aplicação web com Nuxt3

Muitos fizeram do Vue seu framework favorito, então ele é usado cada vez mais a cada dia. Pessoalmente, o que mais gosto nele é que é fácil de entender: você não terá problemas mesmo que toda a sua equipe seja nova nessa tecnologia, embora seja muito poderosa e uma excelente opção mesmo para as aplicações mais complexas.

O Nuxt é escrito em cima do Vue, mas permite executá-lo tanto no lado do cliente quanto no lado do servidor (uma grande vantagem quando se trata de SEO). Além disso, possui diversas ferramentas que tornam o desenvolvimento mais rápido e agradável. Você pode imaginar nunca mais ter que escrever uma importação para seus componentes? Esta estrutura é inteligente o suficiente para fazer isso por você. Você também tem a opção de não escrever o URL de cada uma de suas páginas, mas simplesmente organizá-las em pastas e o Nuxt gerará um roteador para você. Outro grande motivo para usar o Nuxt é desenvolver aplicativos de página única e conteúdo estático em vários arquivos HTML.

A melhor maneira de conhecer o framework é usando. Por isso, vamos fazer uma aplicação web para testá-la. Uma loja online tem os requisitos para testar todas as funções do Nuxt. Vamos começar com o básico.

Requisitos

1- NodeJS

2- Yarn (opcional)

npm install --global yarn

3- Um editor como o VS Code

Para referência, deixo uma cópia do repositório que faremos aqui.

Inicializar Nuxt

Em um terminal ou linha de comando vamos para a pasta onde queremos nosso repositório:

• npx nuxi init store - Para criar um novo aplicativo chamado store
• cd store - Para abrir a pasta do projeto
• yarn install - Para instalar todas as dependências
• yarn dev -o - Para executar o aplicativo

Em nosso navegador podemos ver nossa nova página com o conteúdo padrão do Nuxt.

Roteador

Em pequenas aplicações tudo pode ser integrado em um único arquivo. Porém, neste caso usaremos a pasta pages para ter cada URL em um arquivo diferente.

Em seguida, excluiremos o arquivo app.vue criado por padrão.

Bom. Agora criamos uma pasta chamada pages que o Nuxt reconhecerá. Automaticamente, ele criará um roteador para nós.

Dentro da pasta pages vamos criar um arquivo chamado index.vue:

<template> 
<div> 
Olá mundo 
</div> 
</template>

Podemos verificar em nosso navegador que o conteúdo foi substituído.

Se criarmos outro arquivo chamado promocoes.vue,

<template> 
<div> 
Promocoes 
</div> 
</template> 

podemos vê-lo em nosso navegador http://localhost:3000/promocoes

Também podemos ter pastas dentro de páginas para gerar parte do conteúdo da URL, como categorias dentro de http://localhost:3000/categories/sports

Próxima etapa: vamos criar uma nova pasta dentro de páginas chamadas categorias e dentro de um arquivo chamado sports.vue:

<template> 
<div> 
Esportes
</div> 
</template>

Dentro do template temos nosso HTML. Para incluir JavaScript e um estilo CSS, faríamos assim:

<modelo>
<div class="container">
Me diga, me diga }}
<span></span>
<button @click="increment()">+1</button>
</div>
</template>
<script>
exportação padrão {
dados() {
Retorna {
contagem: 0
}
},
métodos: {
aumentar(){
esta.conta++
}
},
}
</script>
<estilo de escopo>
.recipiente{
margem: 25px;
}
período{
largura: 25px;
exibição: bloco em linha;
}
</style>

Dentro do template, podemos acessar o script usando {{ ... }}

Também vale a pena dar uma olhada em @click data() e métodos:{}

No estilo, inserimos a palavra-chave scoped para indicar que o estilo deve ser aplicado apenas a este documento e não a todo o site.

Nesse caso, usamos o formulário da API de opções. Há também a API de composição, mas falaremos sobre as diferenças mais tarde.

Layout

Nosso cabeçalho e rodapé serão sempre os mesmos. Podemos colocá-lo em um layout para que não precisemos incluí-lo em cada página.

Vamos criar uma nova pasta chamada layouts. Dentro dele, faremos o mesmo com um arquivo chamado default.vue

<template> 
<div> 
Cabeçalho 
<slot /> 
Rodapé
</div> 
</template> 

No cabeçalho podemos colocar o nome da nossa loja, um logotipo, links e informações do usuário.

Componentes

Dentro de cada página podemos usar e também aninhar componentes. Vamos criar uma nova pasta chamada components, dentro dela criamos Header.vue

<template> 
<div> 
Logo, Minha lojka, Links, Usuario 
</div> 
</template> 

Para usar este componente devemos chamá-lo em nosso layout default.vue

<template>
<div>
<cabeçalho/>
<espaço />
Rodapé
</div>
</template>

Em outros frameworks, teríamos que importar nosso componente, mas não no Nuxt. Aqui é automático. No navegador vemos nossa página principal que usa o layout padrão, que por sua vez usa o componente Header.

Recursos Públicos

Para adicionar um logotipo ao nosso cabeçalho, podemos usar a pasta pública. Vamos criar esta pasta e dentro de outra chamada img.

Dentro dele, vamos colocar um arquivo de imagem logo.png. Podemos encontrar uma imagem isenta de royalties no Google

Vamos modificar nosso arquivo Header.vue

<template> 
<div> 
<img src="/img/logo.png" alt="logo" /> 
Minha loja, Links, Usuario 
</div> 
</template>

A imagem deve aparecer no navegador.

Links

Para navegação podemos usar <a>, mas é melhor usar <NuxtLink> pois não requer que a página inteira seja atualizada. Nesse caso, nosso cabeçalho não precisará ser criado novamente. Apenas o conteúdo será alterado.

Header.vue

<template> 
<div> 
<NuxtLink to="/"> 
<img src="/img/logo.png" alt="logo"/> 
</NuxtLink> 
<span/> 
Minha loja 
<span/> 
Links: 
<NuxtLink to="/categorias/esportes">Esportes</NuxtLink> 
<span/>
Usuario 
</div> 
</template> 
<style scoped> 
span{ 
width: 25px; 
display: inline-block; 
} 
</style>

Recapitulação

Temos visto:

• Como criar páginas e como navegar entre elas.
• A criação de componentes e como chamá-los de uma página.
• O uso de templates (layouts) para evitar repetir o mesmo código em cada página.
• O armazenamento de recursos públicos e como acessá-los a partir de um componente.

Também vimos como é bom ter um roteador que o Nuxt escreve para nós, bem como importações geradas automaticamente.

Neste ponto, recomendo fazer o componente de rodapé por conta própria. Adicione links de navegação quando apropriado e personalize o estilo da loja.

Nos próximos artigos veremos:

• Bibliotecas de componentes para construir uma interface de usuário
• Armazenamento de dados no cliente
• Gerenciamento do estado do aplicativo
• Conexões com o back-end
• Segurança
• Tratamento de erros
• Publicar no ambiente de produção
• Notificações
• PWAs
• Testes de conformidade

Espero que este framework o inspire e você goste muito de trabalhar com ele.