Desvendando o Nuxt 3: Guia Prático para Iniciantes
HTML-код
- Опубликовано: 30 июл 2024
- 🚀 Aprenda Nuxt 3 na Prática!
No vídeo de hoje, mergulharemos fundo no Nuxt 3 e exploraremos suas principais funcionalidades em uma abordagem prática. Prepare-se para descobrir como utilizar esse poderoso framework para desenvolver aplicações web de alto desempenho com facilidade.
Conceitos-chave abordados:
1. Framework Completo baseado em Vue.js: Ao contrário do Vue.js, considerado uma biblioteca para manipulação do DOM e criação de componentes, o Nuxt é um framework completo construído sobre a arquitetura do Vue.js. Ele já inclui uma solução abrangente, com as bibliotecas mais utilizadas pela comunidade, previamente instaladas e configuradas seguindo as melhores práticas.
2. Convention over Configuration: O Nuxt é altamente opinativo, definindo padrões claros para o funcionamento da aplicação. Isso não é negativo, pois segue as melhores práticas da comunidade Vue.js. Ao aderir aos padrões do Nuxt, você se livra da necessidade de ajustar configurações manualmente e ganha agilidade no desenvolvimento.
3. Roteamento Simples e Automático: O Nuxt facilita o roteamento, bastando adicionar arquivos com extensão ".vue" na pasta "pages" para que ele os transforme em rotas automaticamente. Além disso, aprenderemos como passar parâmetros através de rotas, utilizando a estrutura "[id].vue" para definir propriedades.
4. Modo de Renderização Universal: O Nuxt 3 utiliza, por padrão, o modo de Renderização Universal (Server Side Rendering - SSR). Isso significa que, ao requisitar uma página, o Nuxt monta a estrutura no lado do servidor, otimizando o carregamento e tornando as páginas mais rápidas em comparação com uma SPA (Single Page Application).
5. Server Engine (Nitro): Descubra o poder do Server Engine do Nuxt, conhecido como Nitro, baseado no microframework H3. Essa ferramenta possibilita a criação de endpoints REST, tornando possível a construção de aplicações Full-Stack. Com o Nitro, você poderá fazer o deploy em qualquer servidor com suporte ao Node.js, ampliando suas opções de hospedagem.
Se gostar do conteúdo, deixe seu like, compartilhe com seus amigos e inscreva-se no canal para não perder os próximos vídeos!
#NuxtJS #VueJS #DesenvolvimentoWeb
0:00 Introdução
0:32 Conceitos
4:44 Projeto Prático
1:12:18 Conclusão
🔗 Links Úteis:
- Documentação oficial do Nuxt 3: nuxt.com/docs
- Github do Nuxt.js: github.com/nuxt/nuxt
=========================================
Music from #Uppbeat (free for Creators!):
uppbeat.io/t/fe77a/vacation-c...
License code: QHS63PPHCAQQYFU0 
Наука
Comecei a usar o Nuxt, com Supabase e Tailwind. Espetacular!
Caí de paraquedas nesse vídeo e já ganhaste mais um inscrito.
Otimo video, tras mais por favor
Ótima explicação e organização da explicação, agradeço por compartilhar a sabedoria.
Rapaz conheci seu canal agora parabéns dou mais que escrito 🎉🎉🎉
Muito bom!!
Muito legal o conteúdo, aprendi bastante coisa legal! Valeu por compartilhar seus conhecimentos, Welker.
Ótimo vídeo.
ganhou mais 1 inscrito! top demais
Muito bom, parabéns pelo ótimo video.
disponibliza esse projetinho no Nuxt
❤❤
Ótimo vídeo, só me perdi no db, qual esta usando? 😅
opa, valeu... Neste caso eu estou usando o useState para gerenciar as informações. Ele é um composable nativo do Nuxt para trabalhar com gerenciamento de estado em memória.
Muito legal, mas já compensa iniciar projetos com o nuxt3? ou por enquanto se mantém no 2? e o pm2, preciso dele para rotas dinâmicas?
Eu já migrei algumas aplicações para o Nuxt 3, incluindo o blog Papo Digital. Pela experiência que tive, acredito que já seja viável iniciar novos projetos com ele. Apesar da versão que utilizei na gravação do vídeo apresentar alguns problemas, saiu uma atualização poucos dias depois. Isso mostra que a equipe que mantém o Nuxt está bem ativa. Quanto ao pm2, acredito que seja algo opcional.
@@papo_digital Entendi, é que estava fazendo uns testes uma vez com nuxt2, fazendo um site com rotas dinâminas, e backend em laravel, mas depois de compilado, toda vez que eu dava um refresh na tela a pagina dava erro 500, ai nas pesquisas achei gente falando que tinha que configurar o pm2 no servidor.
@@crodrigoro erro 500 é algum erro na aplicação, você teria de olhar o erro e corrigir. Tenta depurar, usar o nuxt tool ou o devtool do navegador para encontrar o erro.
O PM2 é usado para gerenciar processos em aplicações nodejs no linux. Geralmente é usado para garantir que a aplicação rode interruptamente, ele é bem útil para gerenciar os processos, permite executar várias instancias de app, seja a mesma ou outros sites.
Ótimo vídeo meu brother, mas gostaria de saber quais são as extensões que você usa no VScode!?
Segue a lista das minhas Extensões:
Codeium - Para sugestões de autocomplete
Tailwind CSS IntelliSense - Para sugestões de classes do Tailwind
Vue Language Features (Volar) - Para suporte a arquivos .vue
Sweet Code Color Theme - Tema de cores que uso no meu VS Code
Acho que você deveria fazer mais vídeos de nuxt, pois é um framework bom, mas quase sem tutoriais por aqui
já estou preparando mais conteúdo sobre nuxt, em breve vai sair mais alguns vídeos.
@@papo_digital fico no aguardo então 😎
Porque usar o nuxt ao invés do next? no que se difere o nuxt?
Fala Guilherme, beleza? Então, tanto o Nuxt quanto o Next tem o mesmo propósito que é estender as funcionalidades padrão e proporcionar mais produtividade aos desenvolvedores. A grande diferença é que o Nuxt estende as funcionalidades do Vue e o Next estende as funcionalidades do React
@@papo_digital bacana irmão. Show de bola.
tem repositorio dessa aula?
infelizmente não publiquei no github 😓