VUE tech guide (alura#182)

Co-authored-by: Vinicios Neves <[email protected]>
Co-authored-by: fabriciocarraro <[email protected]>

_data/cards/pt_BR/create-vue-app.yaml

@@ -0,0 +1,18 @@
+name: Vue - Create App
+logo: 
+short-description:
+key-objectives:
+  - Inicie criando um novo projeto Vue com Vue CLI ou Vite.
+  - Crie   componentes Vue e entenda como estruturá-los usando Options API ou Composition API.
+  - Veja como a navegação com Vue Router e gerenciamento de estado com Pinea podem ser úteis em SPAs escritas em Vue.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Playground - Experimente Vue"
+    link: https://play.vuejs.org/#eNp9kVFLwzAQx7/KeS9TmBuyt1EHKgP1QUUFX/JS2lvXmSYhucxC6Xf32tLqwxiEJPf/X5Lf5Rq8c25xjIRrTELmS8cbZah21jPktEujZmiUAchTTi+vhj2AJ47ejBFAFYo1zB5Jawtf1uv8YjZYbbfIJCNZTg9IwFQ5nTJJBJDsbzZN090CbZssJerV0rjIcLyubE76VqH4CsVKltNpnCOHzJpdWSwOwRqpo4dSmNnKlZr8q+PSmqBwPeIqTIXz57nX2Eeaj3q2p+z7hH4IdacpfPMUyB9J4eRx6gviwd5+vFAt+8kU8qgl+4z5TsHq2DEOaffR5IL9L6+nfaq6npSm+AzbmsmEsagOtP/kPl+hNPPhTOl/uKvFamwOtr/4aany
+  - type: SITE
+    title: "Vue: Documentação - Criando uma aplicação"
+    link: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
+  - type: SITE
+    title: "Vue: Documentação - Ciclo de vida da aplicação"
+    link: https://vuejs.org/guide/essentials/application.html

_data/cards/pt_BR/pinia.yaml

@@ -0,0 +1,20 @@
+name: Pinia
+logo: 
+short-description:
+key-objectives:
+  - Aprenda os conceitos básicos do Vuex, o problema que ele resolve e quando usá-lo.
+  - Compreenda como o estado é armazenado no Vuex e como acessar o estado global em seus componentes Vue.
+  - Aprenda a usar getters para acessar valores derivados do estado.
+  - Descubra como realizar ações assíncronas através de actions.
+  - Aprenda como usar a store fora de componentes com o hook useStore
+  - Explore os guias de migração para mudar do vuex para o Pinia
+  - Mergulhe no universo do SSR combinando o poder do Pina com o Nuxt  
+
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Pinia: livro de receitas"
+    link: https://pinia.vuejs.org/cookbook/
+  - type: SITE
+    title: "Pinia: principais conceitos"
+    link: https://pinia.vuejs.org/core-concepts/

_data/cards/pt_BR/vite.yaml

@@ -0,0 +1,18 @@
+name: Vite
+logo: 
+short-description:
+key-objectives:
+  - "Instalação: Instale o Vite globalmente e crie seu projeto Vue com um simples comando create-vite"
+  - Explore a estrutura de diretórios do Vite e entenda como organizar seus componentes e rotas.
+  - Aprenda a usar os comandos de desenvolvimento e build do Vite para executar e otimizar sua aplicação.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vite: Documentação - Interface da Linha de Comando"
+    link: https://pt.vitejs.dev/guide/why.html
+  - type: SITE
+    title: "Vite: Documentação - Interface da Linha de Comando"
+    link: https://pt.vitejs.dev/guide/cli.html
+  - type: SITE
+    title: "Vite: Documentação - Comparações"
+    link: https://pt.vitejs.dev/guide/comparisons.html

_data/cards/pt_BR/vue-api-calls.yaml

@@ -0,0 +1,33 @@
+name: Vue - Comunicando-se com APIs
+logo: 
+short-description:
+key-objectives:
+  - Entenda o que são APIs, como funcionam e como se comunicam com os clientes web.
+  - Aprenda os conceitos básicos de AJAX e como o Vue se integra com AJAX para recuperar dados de uma API.
+  - Mergulhe no Axios, uma popular biblioteca JavaScript para realizar solicitações HTTP. Aprenda a instalar e a usar o Axios em um projeto Vue para fazer chamadas GET, POST e outras.
+  - Conheça o unfetch, uma alternativa leve e moderna para fazer chamadas de API. Veja como ele pode ser usado em um projeto Vue.
+  - Adentre no mundo do GraphQL, um poderoso paradigma de API. Aprenda a usar o Apollo Client, uma solução completa para o gerenciamento de estado de dados GraphQL em aplicações Vue.
+  - Explore o Vue Relay, uma estrutura para trabalhar com GraphQL no Vue. Entenda as vantagens que ele oferece e como ele difere do Apollo Client.
+  - Aprenda a lidar com as respostas das APIs, incluindo a manipulação de dados recebidos e a tratamento de erros.
+
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Axios"
+    link: https://axios-http.com/docs/intro
+  - type: SITE
+    title: "Unfetch"
+    link: https://github.com/developit/unfetch
+  - type: SITE
+    title: "Vue Apollo"
+    link: https://apollo.vuejs.org/guide/
+  - type: SITE
+    title: "Vue Relay"
+    link: https://github.com/vue-relay/vue-relay
+alura-contents:
+  - type: ARTICLE
+    title: "REST: Conceito e fundamentos"
+    link: https://www.alura.com.br/artigos/rest-conceito-e-fundamentos
+  - type: ARTICLE
+    title: Guia essencial do GraphQL para pessoas que desenvolvem frontend
+    link: https://www.alura.com.br/artigos/guia-graphql-pessoas-que-desenvolvem-frontend

_data/cards/pt_BR/vue-async-components.yaml

@@ -0,0 +1,15 @@
+name: Vue - Componentes assíncronos
+logo: 
+short-description:
+key-objectives:
+  - Compreenda o que são e por que usar componentes assíncronos no Vue.
+  - Aprenda a criar um componente assíncrono básico usando a função defineAsyncComponent.
+  - Domine a renderização de um estado de loading enquanto o componente assíncrono é carregado.
+  - Implemente o tratamento de erros ao carregar o componente assíncrono.
+  - Aplique lazy loading nos seus componentes para melhorar a performance da aplicação.
+  - Use componentes assíncronos com Vue Router para carregar rotas sob demanda.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - Componentes assíncronos"
+    link: https://vuejs.org/guide/components/async.html#basic-usage

_data/cards/pt_BR/vue-capacitor.yaml

@@ -0,0 +1,16 @@
+name: Vue - Capacitor
+logo: 
+short-description:
+key-objectives:
+  - O Capacitor é uma plataforma de execução de aplicativos da Web moderna que permite que você crie aplicativos da Web progressivos (PWA) ou híbridos, mas com acesso a APIs nativas. Integrá-lo ao Vue pode tornar seus aplicativos mais poderosos.
+  - Aprenda o que é o Capacitor e como ele se encaixa no ecossistema de aplicativos da Web modernos.
+  - Aprenda a integrar o Capacitor em um novo ou existente projeto Vue. Esse processo pode envolver a configuração de um novo projeto Vue ou a adição do Capacitor a um projeto Vue existente.
+  - O Capacitor fornece uma série de APIs nativas que você pode usar para adicionar funcionalidades nativas ao seu aplicativo Vue. Aprenda a usar essas APIs nativas.
+  - Uma vez que seu aplicativo está pronto, você pode compilá-lo para iOS, Android ou PWA. Aprenda a compilar e depurar seu aplicativo em diferentes plataformas.
+  - A capacidade do Capacitor de se estender através de plugins é uma de suas principais características. Entenda a arquitetura de plug-in e como criar seu próprio plug-in.
+
+aditional-objectives:
+contents:
+  - type: SITE
+    title: Capacitor
+    link: https://capacitorjs.com/docs

_data/cards/pt_BR/vue-components.yaml

@@ -0,0 +1,34 @@
+name: Vue - Componentes
+logo: 
+short-description:
+key-objectives:
+  - O Vue permite definir componentes usando a Option API ou a Composition API. 
+  - Para que servem e como funcionam componentes
+  - Conheça a especificação da Sintaxe SFC (Single File Component)
+aditional-objectives:
+contents:
+  - type: YOUTUBE
+    title: "Vue.js (O competidor de peso do Angular e React) // Dicionário do Programador"
+    link: https://www.youtube.com/watch?v=bEl6yN3vd-U&t=161s&pp=ygUOYXByZW5kYSB2dWVqcyA%3D
+  - type: SITE
+    title: "Vue: Documentação - Registrando Componentes"
+    link: https://vuejs.org/guide/components/registration.html
+  - type: SITE
+    title: "Vue: Documentação - Single-File Components"
+    link: https://vuejs.org/guide/scaling-up/sfc.html
+alura-contents:
+  - type: ARTICLE
+    title: "Angular vs React vs Vue.js"
+    link: https://www.alura.com.br/artigos/angular-vs-react-vs-vue-js
+  - type: ARTICLE
+    title: "Vue 3: Conhecendo mais de perto"
+    link: https://www.alura.com.br/artigos/vue-3-conhecendo-mais-de-perto
+  - type: PODCAST
+    title: "Vue.js - Hipsters Ponto Tech #288"
+    link: https://www.alura.com.br/podcast/vue-js-hipsters-ponto-tech-288-a1387
+  - type: SITE
+    title: Preparando o ambiente com Vue!"
+    link: https://cursos.alura.com.br/extra/alura-mais/preparando-o-ambiente-com-vue--c1359
+  - type: COURSE
+    title: "Vue3: explorando o framework"
+    link: https://cursos.alura.com.br/course/vue3-comecando-framework

_data/cards/pt_BR/vue-composition-api-deep-dive:.yaml

@@ -0,0 +1,28 @@
+name: Vue - Composition API a fundo
+logo: 
+short-description:
+key-objectives:
+  - Comece entendendo a função setup() e o conceito de reatividade no Vue 3.
+  - Domine ref e reactive, os principais elementos para gerenciar estados reativos.
+  - Aprenda a usar computed para trabalhar com propriedades calculadas.
+  - Explore o uso de watch e watchEffect para reagir às mudanças de estado.
+  - Entenda os hooks do ciclo de vida para controlar o comportamento do componente em diferentes fases.
+  - Crie e exponha funções a partir da função setup.
+  - Aprenda a usar props dentro da setup e como lidar com as diretivas no template.
+  - Implemente a lógica reutilizável através de Composables.
+  - Aprenda as melhores práticas e padrões comuns ao usar a Composition API.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - Options VS Composition API"
+    link: https://vuejs.org/guide/introduction.html#which-to-choose
+  - type: SITE
+    title: "Vue: Documentação - Tutoriais práticos para se aprofundar na Composition API"
+    link: https://vuejs.org/tutorial/#step-1
+  - type: SITE
+    title: "Vue Composition API"
+    link: https://www.w3schools.com/vue/vue_composition-api.php
+alura-contents:
+  - type: COURSE
+    title: "Vue3: composition API e Vuex"
+    link: https://www.alura.com.br/curso-online-vue3-composition-api-vuex

_data/cards/pt_BR/vue-composition-api.yaml

@@ -0,0 +1,25 @@
+name: Vue - Composition API
+logo: 
+short-description:
+key-objectives:
+  - Inicie componentes com a função setup(). Ela é o coração da Composition API.
+  - Aprenda a usar ref e reactive para criar e gerenciar estados reativos.
+  - Domine os hooks do ciclo de vida. Eles são vitais para controlar comportamentos em diferentes estágios do componente.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - O básico de um componente"
+    link: https://vuejs.org/guide/essentials/component-basics.html
+  - type: SITE
+    title: "Vue: Documentação - Ref e reatividade"
+    link: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref
+  - type: SITE
+    title: "Vue: Documentação - Ciclo de vida usando hooks"
+    link: https://vuejs.org/guide/essentials/lifecycle.html
+  - type: SITE
+    title: "Vue: Documentação - Propriedades computadas"
+    link: https://vuejs.org/guide/essentials/computed.html
+alura-contents:
+  - type: COURSE
+    title: "Vue3: composition API e Vuex"
+    link: https://www.alura.com.br/curso-online-vue3-composition-api-vuex

_data/cards/pt_BR/vue-design-system-libraries.yaml

@@ -0,0 +1,28 @@
+name: Vue - Design System
+logo: 
+short-description:
+key-objectives:
+  - Compreenda o conceito de um design system e sua importância para manter a consistência e escalabilidade em projetos grandes.
+  - Conheça algumas das bibliotecas de UI mais populares no Vue, como Vuetify, Quasar, Buefy, e Vue Material.
+  - Avalie as bibliotecas disponíveis baseado em suas necessidades - considere o tamanho da biblioteca, a comunidade por trás dela, a frequência de atualizações e se ela atende aos requisitos do seu projeto.
+  - Escolha uma biblioteca e aprenda como instalar e configurar no seu projeto Vue.
+  - Comece a usar os componentes disponíveis na biblioteca. Isso geralmente inclui botões, formulários, cards, entre outros.
+  - Aprenda como personalizar componentes para adequá-los ao seu design system.
+  - Se necessário, aprenda a criar seus próprios componentes que estejam em conformidade com o design system.
+  - Documente seus componentes e use ferramentas como Storybook para facilitar a comunicação entre designers e desenvolvedores. 
+  - Entenda como manter a biblioteca do seu design system atualizada e consistente ao longo do tempo.
+  - Aprenda como integrar seu design system com outras partes do seu projeto, como Vuex para gerenciamento de estado, Vue Router para roteamento, entre outros.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vuetify - Material Design Framework"
+    link: https://vuetifyjs.com/en/
+  - type: SITE
+    title: "The enterprise-ready cross-platform VueJs framework"
+    link: https://quasar.dev/
+  - type: SITE
+    title: "Buefy - Lightweight UI components for Vue.js based on Bulma"
+    link: https://buefy.org/
+  - type: SITE
+    title: "Vue Material - Build beautiful apps with Material Design and Vue.js"
+    link: https://www.creative-tim.com/vuematerial/

_data/cards/pt_BR/vue-dev-tools.yaml

@@ -0,0 +1,15 @@
+name: Vue Devtools
+logo: 
+short-description:
+key-objectives:
+  - Comece instalando a extensão Vue DevTools no seu navegador.
+  - Familiarize-se com a interface, aprendendo sobre as abas de Componentes, Vuex, Roteamento e Performance.
+  - Aprenda a inspecionar componentes, observando seus props, dados, e slots.
+  - Entenda como monitorar a store do Vuex | Pinia e o histórico de roteamento.
+  - Pratique a edição no local do estado da aplicação e o "time-travel debugging".
+  - Ajuste as configurações ao seu gosto e integre as DevTools com seu ambiente de desenvolvimento.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue.js devtools"
+    link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

_data/cards/pt_BR/vue-directives.yaml

@@ -0,0 +1,21 @@
+name: Vue - Diretivas
+logo: 
+short-description:
+key-objectives:
+  - "Explore as diretivas básicas oferecidas pelo Vue, como v-if, v-else, v-show, v-bind, v-model e v-for. "
+  - "Depois de se familiarizar com as diretivas integradas, suba de nível criando suas próprias diretivas personalizadas."
+  - "Para finalizar sua jornada, domine os argumentos e modificadores das diretivas."
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - Renderização condicional"
+    link: https://vuejs.org/guide/essentials/conditional.html
+  - type: SITE
+    title: "Vue: Documentação - Renderização de listas"
+    link: https://vuejs.org/guide/essentials/list.html
+  - type: SITE
+    title: "Vue: Documentação - Diretivas customizadas  "
+    link: https://vuejs.org/guide/reusability/custom-directives.html#custom-directives
+  - type: SITE
+    title: "Exibições de página dinâmicas com o Vue.js"
+    link: https://learn.microsoft.com/pt-br/training/modules/vue-dynamic-rendering/

_data/cards/pt_BR/vue-e2e-testing.yaml

@@ -0,0 +1,23 @@
+name: Vue - testes fim-a-fim  
+logo: 
+short-description:
+key-objectives:
+  - Testes E2E simulam a experiência do usuário ao interagir com a aplicação, garantindo que todos os componentes funcionem juntos como esperado.
+  - Cypress é uma ferramenta comum para realizar testes E2E em aplicações web, incluindo Vue. Instale e configure o Cypress para o seu projeto.
+  - Comece a escrever testes que simulam ações do usuário, como clicar em botões, preencher formulários e navegar entre as páginas.
+  - Os comandos personalizados ajudam a simplificar os testes, evitando a repetição de códigos de teste.
+  - Aprenda a manipular e testar diferentes estados da sua aplicação, como usuários logados e deslogados.
+  - Integre seus testes E2E ao seu processo de integração contínua/deploy contínuo (CI/CD) para garantir que sua aplicação esteja sempre funcionando como esperado.
+
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - Testes fim-a-fim"
+    link: https://vuejs.org/guide/scaling-up/testing.html#e2e-testing
+alura-contents:
+  - type: YOUTUBE
+    title: "Alura: Testes em Javascript - Alura Live 50"
+    link: https://www.youtube.com/watch?v=r1rndQwFLMY
+  - type: SITE
+    title: "Primeiras aulas do curso Cypress: automação de testes E2E"
+    link: https://www.alura.com.br/conteudo/cypress-automacao-testes-e2e

_data/cards/pt_BR/vue-events.yaml

@@ -0,0 +1,19 @@
+name: Vue - Eventos
+logo: 
+short-description:
+key-objectives:
+  - Inicie seu aprendizado sobre eventos no Vue, entendendo a diferença entre eventos do DOM e eventos personalizados do Vue.
+  - Aprenda a usar a diretiva v-on para adicionar manipuladores de eventos a elementos do DOM e como passar argumentos para os manipuladores de eventos.
+  - Mergulhe nos eventos de teclado e mouse, entendendo como capturá-los e como usar modificadores de eventos para simplificar o código.
+  - Descubra como emitir e ouvir eventos personalizados usando o método $emit e a diretiva v-on.
+  - Aprofunde-se na compreensão do bubbling e capturing de eventos no Vue, e quando usar o .native modifier.
+  - Conheça o conceito de "Event Bus" para comunicação entre componentes não relacionados.
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - Manipulando eventos"
+    link: https://vuejs.org/guide/essentials/event-handling.html
+  - type: SITE
+    title: "Eventos em apps Vue"
+    link: https://www.w3schools.com/vue/vue_events.php
+

_data/cards/pt_BR/vue-forms.yaml

@@ -0,0 +1,30 @@
+name: Vue Forms
+logo: 
+short-description:
+key-objectives:
+  - Comece aprendendo as bases dos formulários no Vue, incluindo v-model e como vincular diferentes tipos de campos de entrada (input binds).
+  - Depois de dominar as bases, aprenda como o Vue 3 lida com as entradas do usuário e as diferenças em relação às versões anteriores.
+  - Mergulhe no mundo da Vue Formulate, uma das bibliotecas mais completas para trabalhar com formulários no Vue. Compreenda como usar seus recursos para construir formulários complexos com facilidade.
+  - Continue sua jornada com a VeeValidate, uma biblioteca para validação de formulários que oferece muitas opções de validação e permite que você crie suas próprias regras.
+  - Explore a Vuelidate, outra biblioteca de validação poderosa que oferece uma abordagem um pouco diferente da VeeValidate.
+  - Além de usar bibliotecas, aprenda a criar suas próprias regras de validação personalizadas no Vue.
+  - Aprofunde-se na criação de formulários dinâmicos, onde os campos podem mudar com base nas ações do usuário.
+  - Descubra como integrar a gestão dos formulários com Vuex/Pinia  para um gerenciamento de estado mais sólido e escalável.
+
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Vue: Documentação - Inputs"
+    link: https://vuejs.org/guide/essentials/forms.html
+  - type: SITE
+    title: Vue Formulate
+    link: https://vueformulate.com/
+  - type: SITE
+    title: Vee Validate
+    link: https://vee-validate.logaretm.com/v4/
+  - type: SITE
+    title: Vuex
+    link: https://vuex.vuejs.org/
+  - type: SITE
+    title: Pinia
+    link: https://pinia.vuejs.org/

_data/cards/pt_BR/vue-nuxt.yaml

@@ -0,0 +1,19 @@
+name: Nuxt
+logo: 
+short-description:
+key-objectives:
+  - Entenda o que é Nuxt.js, como ele funciona e quando usá-lo.
+  - Aprenda como instalar e configurar um projeto Nuxt.js a partir do zero.
+  - Familiarize-se com a estrutura de pastas de um projeto Nuxt.js e o que cada pasta faz.
+  - Compreenda a geração automática de rotas em Nuxt.js e como trabalhar com rotas dinâmicas.
+  - Aprenda a integrar soluções de gerenciamento do estado global em uma aplicação Nuxt.js.
+  - Entenda as diferenças entre SSR e SSG e como usá-los em Nuxt.js.
+  - Aprenda a usar plugins Nuxt.js para adicionar funcionalidades globais à sua aplicação.
+  - Explore como o middleware pode ajudá-lo a executar código antes de renderizar a página.
+  - Conheça as diferentes opções de deploy de uma aplicação Nuxt.js.
+
+aditional-objectives:
+contents:
+  - type: SITE
+    title: "Nuxt: The Intuitive Vue Framework"
+    link: https://v2.nuxt.com/docs/get-started/installation