▲ Sessão da Comunidade: Nuxt na Vercel

VVercel
컴퓨터/소프트웨어자격증/평생교육AI/미래기술

Transcript

00:00:00E se eu quiser um portfólio, por exemplo, talvez não seja muito importante dizer usando isto, mas
00:00:13sim, você tem diretamente o que deseja e pode editar seu projeto rapidamente.
00:00:29Então é isso, acho que quanto aos agentes por enquanto, não sei se temos mais ideias.
00:00:38Você pode mencionar as postagens do blog onde temos tudo em detalhes para explicar como foi
00:00:45implementado, além do código-fonte ser aberto.
00:00:49Se quiser se aprofundar em como criamos o próximo agente no site, quais componentes
00:00:55usamos para mostrar o raciocínio na lateral, tudo por baixo do capô e
00:01:02se quiser contribuir para adicionar mais recursos a ele, acho que é por aqui que pode começar
00:01:08a aprender.
00:01:11E esta também não é a única coisa, certo?
00:01:13Porque o Hugo construiu o kit de ferramentas MCP, que permite que qualquer site Nuxt também seja um,
00:01:22seja um servidor MCP e seja integrado a qualquer IA que o suporte.
00:01:30E o Nuxt.com realmente se tornou o foco de muitas coisas.
00:01:35Você nunca acreditaria que ele tem essa API.
00:01:39É a nossa API de módulos que alimenta as ferramentas de desenvolvimento do Nuxt.
00:01:42Ele tem servidores MCP, muitos deles, aos quais você pode se conectar pelo seu app Nuxt, pela
00:01:48sua IA, e agora foi construído com chat.
00:01:53Digo, alguém precisa parar o Hugo.
00:01:55Ele é simplesmente bom demais.
00:01:59Obrigado.
00:02:03Algo que ele fez, vou tentar compartilhar minha tela inteira, que eu acho
00:02:10bem impressionante.
00:02:11Não sei se vocês estão vendo minha tela agora.
00:02:15Sim.
00:02:16É este painel de admin, sinto muito mas vocês não poderão se conectar a este admin, mas
00:02:22temos este widget no site onde você pode dar seu feedback.
00:02:27E isso é muito útil para sabermos em quais páginas focar
00:02:32ao longo do tempo, se está melhorando.
00:02:37E ele lançou recentemente o admin MCP onde nos conectamos à nossa conversa e, se não
00:02:47me engano aqui.
00:02:50Eu poderia pedir para ir no admin MCP do Nuxt e me mostrar a página de erro
00:03:04e mais feedbacks para melhorá-la.
00:03:09Desta forma, normalmente, se eu configurar corretamente, deve funcionar, mas esse é o
00:03:16admin, é.
00:03:23Foi o que imaginei.
00:03:24Acho que preciso usar o agente chamado admin MCP do Nuxt e pedir informações sobre o feedback
00:03:35da pior página e como melhorá-la.
00:03:42Talvez este aqui seja o correto, deve ser, sim.
00:03:56Então ele está nos dizendo que esta página tem uma pontuação média.
00:04:00Só tivemos três feedbacks, mas assim conseguimos entender algumas pistas sobre como
00:04:07melhorar esta página.
00:04:09Provavelmente é porque temos apenas uma semana de feedback.
00:04:12Podemos pedir mais.
00:04:14Sim, exatamente.
00:04:17E algo mais em que estivemos trabalhando, você mencionou o Nuxt Content, e o Nuxt Content
00:04:21é o nosso CMS base onde temos toda a nossa documentação em DOM e podemos usar
00:04:29um componente dentro do Markdown.
00:04:32Nos últimos meses, trabalhamos em um projeto chamado Comark.
00:04:36Extraímos o núcleo do conteúdo para podermos abri-lo e
00:04:44colaborar com a equipe do SvelteKit e com a equipe do Nuxt para ter este Markdown com
00:04:50componentes em tempo de execução.
00:04:53E enquanto falamos sobre IA, este projeto também suporta streaming e fechamento automático.
00:05:00Então temos um recurso em andamento acontecendo aqui, isso permite
00:05:10dizer: "gere para mim uma página sobre calçados de basquete".
00:05:20E podemos, agora a IA está basicamente transmitindo Markdown puro, mas ao aproveitar
00:05:26e ensinar a IA a usar esta sintaxe, ela pode começar a gerar landing pages
00:05:33usando esses componentes por baixo do capô.
00:05:37Este é um progresso em estágio inicial, mas é muito promissor e queremos
00:05:44trabalhar para abri-lo a todos na V1 nas próximas semanas.
00:05:51E esse é o progresso atual do Markdown.
00:05:56E sim, acho que talvez o Daniel tenha algum progresso que queira compartilhar.
00:06:01Ou acabo de ver que ele saiu.
00:06:03Oh, ele voltou.
00:06:04Bem na hora.
00:06:05Ele voltou.
00:06:06Olá.
00:06:07Bem-vindo.
00:06:08Sabe, eu só gosto de manter vocês atentos.
00:06:17É, eu estava falando sobre o Comark e o Nuxt Content antes, e
00:06:28pensei que o Daniel pudesse ter algo a mencionar.
00:06:30E então, percebi o que você queria após a chamada.
00:06:35Bem, sim.
00:06:37Acho que um dos pontos muito interessantes, não sei quantas pessoas
00:06:44estão ouvindo isso?
00:06:45Como você revela alguns segredos sobre coisas que pensamos em trabalhar?
00:06:52Dê ao povo o que eles querem, não conte a ninguém, certo?
00:06:57É só entre nós e os amigos próximos que estão ouvindo agora, estamos falando
00:07:12sobre como melhorar o nosso Nuxt.
00:07:14Por muito tempo tem sido isso, e isso se sobrepõe um pouco àquele
00:07:19lado especial, mas o Nuxt por muito tempo foi uma solução
00:07:25para SEO.
00:07:26As pessoas usam o Nuxt e obtêm ótimos resultados em mecanismos de busca de forma
00:07:33nativa.
00:07:34Na verdade, acho que por um bom tempo, o Nuxt estava no topo das buscas por Next.js,
00:07:42isso está certo, Sebastian, você se lembra disso também, certo?
00:07:46As pessoas buscavam por Next e o Nuxt aparecia no topo da lista, e isso não é mais
00:07:50verdade.
00:07:51Nós absolutamente não superamos o Next no ranking mais.
00:07:53Mas estamos pensando no que podemos fazer com ferramentas como o Nuxt Content para que o Nuxt
00:07:59seja a melhor e mais fenomenal plataforma para otimização de mecanismos de busca.
00:08:05O que você faz quando as pessoas estão buscando informações sobre seu produto ou o que quer
00:08:10que estejam usando, talvez algum outro tipo de agente, ou talvez
00:08:16estejam usando um alto-falante inteligente ou algo assim.
00:08:19Como elas obtêm informações sobre o seu site?
00:08:22E há muitas coisas que planejamos sobre isso.
00:08:24Não estou liderando esse projeto, para ser claro, mas dentro da equipe estamos, e não quero
00:08:28revelar segredos demais, mas vale a pena mencionar, talvez, quando se
00:08:33pensa em novidades legais que podem acontecer no lado do Nuxt Content.
00:08:37das coisas.
00:08:38Sim.
00:08:39Obrigado.
00:08:40Se você olhar os pull requests recentes no repositório do Nuxt.com ou na
00:08:47documentação do Nuxt UI, o Benjamin e o Hugo têm enviado mais otimizações de AEO.
00:08:53Basicamente, se um agente está tentando rastrear a documentação do Nuxt, se o
00:09:00detectarmos pelo cabeçalho "accept", aguardando texto moderno, servimos as páginas
00:09:06modernas diretamente; o mesmo se detectarmos o user agent, fazemos isso para todas as páginas,
00:09:13tentando adicionar o JSON-LD, ou seja, mais conteúdo para os agentes entenderem
00:09:19o que estão rastreando, para reduzir a janela de contexto e também entregar
00:09:24o conteúdo diretamente.
00:09:26E até agora estamos experimentando e pensando em quais recursos poderiam fazer parte
00:09:31do núcleo ou de um módulo principal, mas para isso, antes de refatorar e tentar
00:09:36pensar em algo agnóstico, precisamos primeiro experimentar nós mesmos, e
00:09:42ver como a comunidade adota e se realmente faz sentido, porque as coisas estão evoluindo
00:09:48muito rápido.
00:09:49Falamos sobre LLMs.txt, MCP, e agora sobre aceitar Markdown como um cabeçalho.
00:09:56Como será daqui a duas semanas?
00:09:58Não queremos colocar recursos diretamente no núcleo se precisarmos descontinuá-los
00:10:06mais tarde.
00:10:07Então estamos indo passo a passo nisso, mas experimentando sempre que podemos.
00:10:16Acho que uma das coisas que amo no Nuxt, e falamos sobre o ecossistema de módulos
00:10:21e o fato de ser possível estendê-lo.
00:10:24Isso significa que é possível construir coisas assim que não entram no núcleo e
00:10:28não precisam entrar, podem ser apenas um experimento.
00:10:31Podem ser algo que as pessoas usem em produção, em seus sites, e podemos realmente
00:10:35obter feedback, não apenas conceitual ou sobre um RFC, mas feedback prático
00:10:42em projetos do mundo real ou casos de uso reais.
00:10:46Antes de precisarmos tomar a decisão sobre se algo se torna
00:10:53um módulo principal ou não.
00:10:56Não vejo se há alguma pergunta no chat, no chat ao vivo, que
00:11:07pudéssemos responder ou...
00:11:08Eu tenho uma pergunta; sei que você já compartilhou os segredos
00:11:15do que está trabalhando, mas há algo vindo aí que te deixe particularmente empolgado
00:11:20sobre o Nuxt que você possa compartilhar?
00:11:32Há muitas coisas que me empolgam, mas eu não quero...
00:11:40Uma das coisas é que estamos trabalhando para deixar tudo pronto para o Nuxt versão
00:11:44cinco.
00:11:45Isso é algo de que temos falado há algum tempo.
00:11:47A versão três do Nitro é o principal recurso que isso traz, e deixar
00:11:55o ecossistema pronto para essa mudança é um grande trabalho, mas é a direção certa.
00:12:01O Nitro nos aproxima dos padrões da web.
00:12:02Um wrapper de servidor realmente minimalista que seja o mais nativo possível,
00:12:05onde quer que seja, seja no Bun, Deno, Node ou o que for.
00:12:12E acho que a mudança será algo que as pessoas sentirão imediatamente
00:12:18que as deixa muito felizes, a versão cinco nightly, localmente.
00:12:24E já é uma alegria usar, mesmo que não esteja disponível
00:12:31em beta ou mesmo alfa.
00:12:36Legal.
00:12:38Temos um comentário da comunidade, alguém disse que está muito animado pela V5.
00:12:39E outra pergunta também: quais são suas principais recomendações e dicas para
00:12:45otimizar cargas de trabalho do Nuxt na Vercel?
00:12:50Hugo, você quer começar? Sobre otimizar o Nuxt na Vercel, porque...
00:12:53Depende de que forma, o que você quer dizer com otimização,
00:13:07é para velocidade, para build, para execução?
00:13:14Sim, acho que há muitas maneiras, mas eu abordaria pelo menos a parte
00:13:19do tempo de execução.
00:13:28E acho que algo que ainda estamos tentando descobrir é como no Nuxt podemos
00:13:29sugerir ao usuário que esta página poderia ser colocada em cache ou renderizada, é sempre complicado
00:13:36pois podemos ter componentes que fazem busca de dados e que você usa nas páginas.
00:13:44Você pode ter autenticação diretamente em toda a sua aplicação.
00:13:49Nesse caso, você não quer cache, ou se começar a fazer cache de páginas com
00:13:53autenticação, digamos que você tenha um cabeçalho e exiba o usuário autenticado.
00:13:58Então você quer garantir que está pré-renderizando um placeholder, para
00:14:03não ter esse erro de hidratação por ter descoberto no lado do cliente
00:14:09que está autenticado.
00:14:13Então, eu diria que no Nuxt temos este recurso muito poderoso que também vem
00:14:14do Nitro.
00:14:21Chama-se "route rules" (regras de rota).
00:14:22Com essas regras, você poderá mencionar parte das rotas usando padrões.
00:14:24Pode dizer que este grupo, como um admin embutido, em "/admin",
00:14:29desative o SSR.
00:14:35Não preciso disso para esta parte; para "/blog/**", você os coloca
00:14:37como ISR, pois não acessamos postagens do blog a cada segundo.
00:14:45Assim, você pode aproveitar a geração estática incremental.
00:14:50Com essas regras de rota, você poderá otimizar partes dos seus apps com apenas
00:14:55algumas linhas de configuração.
00:15:01E esta seria minha maior recomendação antes de enviar para produção.
00:15:03Verifique suas regras de rota.
00:15:10Incrível.
00:15:12Obrigado.
00:15:13Uma coisa que... pode falar.
00:15:14Ah, desculpe.
00:15:18Uma coisa que pode valer a pena conferir é o NPMX.
00:15:20O NPMX, se você ainda não conhece, é um substituto para o npmjs.com.
00:15:23É um navegador para o registro do NPM, construído em Nuxt e hospedado
00:15:30na Vercel, e nós o otimizamos muito para performance.
00:15:36Se você busca como otimizar algo para performance na Vercel e quer ver
00:15:42como essas coisas parecem em um app real que projetamos para
00:15:45escalar para muitas visualizações de página, pois muita gente o usa, então confira.
00:15:49Você verá as regras de rota em ação, verá o cache.
00:15:58Nós usamos cache com geração estática incremental.
00:16:01Efetivamente construindo e armazenando payloads em cache; quando necessário, usamos o novo recurso
00:16:09do Nuxt 4.4, que é um cache de payload, mesmo para páginas não pré-renderizadas, o que
00:16:17eu acho muito legal.
00:16:27Significa que você tem os benefícios de buscar dados antes mesmo de mudar de página.
00:16:28Os dados necessários para aquela página já são buscados pelo framework antecipadamente.
00:16:34E isso proporciona uma experiência muito, muito rápida.
00:16:39E há muito mais coisas que você pode notar e talvez testar em
00:16:45seu site.
00:16:52Incrível.
00:16:53Obrigado.
00:16:54Obrigado.
00:16:55E também recebemos um comentário, alguém disse: "Nunca experimentei o Nuxt antes,
00:17:03pode valer a pena tentar agora".
00:17:04Então, temos alguns curiosos sobre Nuxt na audiência. Para essas pessoas, qual
00:17:09é a melhor maneira de começarem com o Nuxt?
00:17:12Sei que já mencionamos algumas ferramentas de IA também, mas, sim, alguma recomendação
00:17:16quanto a isso?
00:17:17Acho que, no momento, já temos os agentes do Nuxt, então eles podem dar
00:17:24dicas muito boas sobre por onde começar, se você quer usar um template ou começar
00:17:29do zero usando a documentação.
00:17:31Temos muitos templates em Nuxt.com, mas também no Nuxt UI, e também
00:17:39temos o Nuxt.new, que tem outros templates, mas, sim, você pode perguntar diretamente
00:17:48ao agente agora.
00:17:51Além disso, na documentação do Nuxt UI, você já pode abrir no v0 também, se quiser
00:17:57apenas conversar com o projeto antes de levá-lo para uma IDE e começar a programar de fato.
00:18:08Acho que, muitas vezes, ao começar... eu não tive problemas começando
00:18:12do zero, mas gosto de ter pelo menos um projeto mínimo clonado, pessoalmente.
00:18:17Então, tenho meu próprio template no GitHub: danielrose/nuxt-site-template.
00:18:23...
00:18:24E você pode clonar isso.
00:18:25É bem minimalista, mas tem coisas como testes, testes unitários, e coisas
00:18:31assim, que são dicas para os LLMs de que quero continuar construindo o projeto
00:18:37desta forma.
00:18:38E acho que esses templates mínimos são um pouco como cristais de semente para
00:18:44LLMs.
00:18:45Eles os apontam na direção certa e dão a orientação necessária para que
00:18:50o projeto cresça da maneira que você provavelmente deseja.
00:18:52E, na verdade, você não precisa de nada especial além disso.
00:18:56Embora você possa adicionar coisas, não precisa de nada especial.
00:19:01Você pode simplesmente começar com um template ou um projeto básico do Nuxt e dizer:
00:19:09"Isto é o que eu quero construir".
00:19:10E descobri que os LLMs são fenomenais nisso.
00:19:12Eles não têm problemas.
00:19:14Portanto, o principal, eu acho, ao tentar qualquer coisa nova, é criar
00:19:19oportunidades para aprender e não apenas ter os resultados, certo?
00:19:24Tipo, tudo bem, parece ótimo, mas até que ponto você sente que realmente
00:19:29tentou o Nuxt? Algo foi criado para você.
00:19:33Então, se você puder criar oportunidades para talvez pedir ao LLM: "Dê-me um tour",
00:19:40"ensine-me as funcionalidades do Nuxt usando o que você construiu".
00:19:45Coisas assim são muito úteis porque conectam os pontos. Primeiro, ajuda você
00:19:49enquanto revisa o código que foi criado.
00:19:51E segundo, você aprende; você ganha novas habilidades e experiência com algo.
00:19:56Cat Hicks, Dra. Cat Hicks... procurem por ela no GitHub.
00:20:02Ela produziu algumas "Claude skills" para construir e criar oportunidades de aprendizado com qualquer
00:20:07coisa que você esteja fazendo. Pequenos exercícios de 10 minutos em meio a desafios de código que
00:20:12permitem que você tente internalizar parte do que seu agente está trabalhando.
00:20:17Temos um acesso sem precedentes ao conhecimento, sendo capazes de fazer coisas
00:20:22que talvez não soubéssemos como fazer seis meses atrás. O segredo é como
00:20:29nos mantemos crescendo e nos desenvolvendo como pessoas, e incorporar alguns desses
00:20:35hábitos, habilidades e pausas para aprendizado é, eu acho, algo muito, muito importante
00:20:41se quisermos ver nossos cérebros continuarem a se desenvolver.
00:20:46Esse é um excelente ponto. Como um usuário iniciante de Nuxt também, vindo
00:20:56principalmente de uma base de Svelte... eu também fiz meu agente mapear os conceitos de
00:21:02Svelte para Nuxt. Então, com certeza, concordo com o uso dos nossos agentes para nos ajudar a aprender.
00:21:08Alguém quer acrescentar algo? Isso é ótimo. E acho que...
00:21:17vou compartilhar minha tela novamente. O Nuxt é verdadeiramente um framework progressivo.
00:21:26Garantimos que você possa começar um projeto mínimo com apenas um arquivo app.vue.
00:21:32Essa é a sua base principal. E então você pode adicionar progressivamente roteamento e busca de dados.
00:21:40Temos essa funcionalidade de importação automática, que foi uma das melhores melhorias
00:21:45em termos de experiência do desenvolvedor. E agora com o avanço da IA,
00:21:51estamos pensando em permitir que você a desative, caso prefira ter as importações diretamente
00:21:56no seu código. Mas esta é, para mim, a melhor maneira de começar.
00:22:03Também temos EVALS. Estamos rodando EVALS no Nuxt em diferentes modelos.
00:22:11E até agora, sem nem precisar ajustar o agente com uma .m skill ou agent.md,
00:22:21eles são muito bons na maior parte do conhecimento de Nuxt até aqui. Além disso, se você
00:22:28gosta de MCP, preciso conferir onde temos isso, mas acho que sim,
00:22:35temos esse servidor MCP que você pode adicionar diretamente ao seu código. Então, sim.
00:22:49Somos movidos por IA, mas até agora, mesmo sem adicionar o servidor MCP,
00:22:57os agentes estão indo muito bem. O que gosto de recomendar é: tente com uma configuração mínima
00:23:03e vá adicionando funcionalidades passo a passo. E se usar IA para isso, peça para ela
00:23:10explicar o porquê. Como o Daniel disse, isso é fundamental para manter seu cérebro
00:23:16ativo o máximo possível. Com certeza. Temos mais algumas perguntas
00:23:25para encerrar esta seção. Uma do chat: "Estou vendo o Nuxt ser muito usado na
00:23:30comunidade de e-commerce alemã. Vocês acham que, em geral, o Nuxt é mais popular na Europa do que
00:23:36nos EUA ou é equilibrado ou o contrário?"
00:23:42Bem, eu moro em Edimburgo, o Sebastian e o Hugo estão em Londres. Maya, você
00:23:51também está na Europa. Sinto que talvez eu seja a pessoa errada para perguntar
00:23:57sobre a popularidade do Nuxt nos EUA, mas minha sensação é que é mais popular na Europa. Às vezes
00:24:02parece ser assim que as coisas funcionam. O React tende a ser mais popular na América do Norte. O Vue era
00:24:09muito mais popular em outros lugares do mundo. E isso parece ser verdade com o Nuxt também,
00:24:15mas precisamos mudar isso. Precisamos de mais pessoas usando Nuxt nos EUA. Precisamos
00:24:19de um membro da equipe principal dos EUA, algo assim. Não sei.
00:24:25Nuxt em todo o mundo. Sim. Próxima pergunta do X: "Com o Nuxt evoluindo rápido do 3
00:24:35para o 4 e o 5, qual a melhor estratégia para as equipes lidarem com a migração para produção com segurança,
00:24:41especialmente com as mudanças no SSR e no Nitro?"
00:24:50Ainda não sabemos muito sobre isso. Entre o Nuxt 3 e o Nuxt 4,
00:24:58acredito que quase não houve mudanças quebras (breaking changes) ou elas foram muito
00:25:03bem documentadas. Então você pode apenas passar a página para sua IA e pedir para ela
00:25:11te ajudar nisso. E mesmo sem IA, foi bem fácil migrar.
00:25:17Só houve mudanças quebras se você estivesse usando funcionalidades bem avançadas.
00:25:21O Daniel garantiu que a atualização fosse muito suave. Foi mais difícil
00:25:27do 2 para o 3, porque também tivemos a atualização do Vue 2 para o Vue 3, que
00:25:33era um framework diferente e uma abordagem diferente, entrando na era
00:25:40dos composables. E decidimos também reescrever todo o motor do servidor. Assim,
00:25:46poderíamos trabalhar em ambientes serverless com performance. Estas duas grandes reescritas nós planejamos
00:25:53para o Nuxt. Então o próximo major será acessível e existe essa
00:26:01compatibilidade de portas que construímos, o que significa que você pode começar a se preparar
00:26:08para a V5 ou para as novas funcionalidades ou mudanças quebras que virão na V5 com antecedência.
00:26:15Para que você possa se preparar; deixarei o Daniel continuar.
00:26:22Acho que esse é o ponto. Uma das coisas principais que eu diria é que queremos ser
00:26:26compatíveis com versões futuras e anteriores. E acho que a atualização da versão 3 para a 4...
00:26:34quisemos deliberadamente provar que você não precisa ter medo de mudanças quebras
00:26:39no Nuxt, nem ter medo de versões major. Às vezes parece
00:26:45que você fica preso em algo, tipo: "Ah, não podemos lançar uma major".
00:26:50Nosso plano é lançar uma nova a cada ano, pelo menos. E, curiosamente, isso parece
00:26:57coincidir com muitos outros projetos. Se você olhar para o Node, por exemplo, o novo
00:27:01cronograma de lançamentos deles, garantindo que haja majors todos os anos, combina
00:27:09muito bem conosco. E acho que, em geral, o padrão é: quando você usa o Nuxt,
00:27:15você o usa para construir um projeto como uma casa. Seu projeto está
00:27:21vivo. Como uma casa, ele precisa de pintura nova, de retoques.
00:27:28Você sempre quer que seu site adote as melhores práticas de hoje, não apenas as melhores
00:27:33práticas de quando você o escreveu, por isso o Nuxt precisa continuar evoluindo e garantir
00:27:38que ele tenha o que você precisa para construir um ótimo site. E acho que provavelmente
00:27:46nos últimos meses, vimos alguns ataques à cadeia de suprimentos no NPM. Isso apenas
00:27:52reforça a necessidade de garantir que, com todas as suas dependências, você se mantenha atualizado
00:27:57e acompanhando o que há de mais recente. E a responsabilidade
00:28:03para nós, como criadores e mantenedores de pacotes, é garantir que esses passos de atualização
00:28:08sejam o mais indolores possível. Então, se você está achando que atualizar
00:28:14o Nuxt é doloroso, isso é um problema. Diga-me, reclame comigo, por favor,
00:28:21porque não queremos que seja assim. Não queremos pessoas dizendo: "Ah, como
00:28:25eu atualizo?". Queremos pessoas dizendo: "Ah, é um prazer. Levei meio
00:28:29dia para fazer essa atualização major, não dois meses". Queremos muito otimizar isso
00:28:36por vários motivos, não só porque é o que os sites precisam, mas porque é o que o ecossistema
00:28:42precisa. E sim, queremos que as pessoas não tenham medo dessas atualizações.
00:28:47E se quiserem falar com o Daniel, ele está no BlueSky em ro.dev.
00:28:54Você pode me encontrar em quase qualquer lugar. Incrível. Muito bem dito, obrigado. E quero
00:29:01encerrar nossas perguntas falando sobre comunidade. Não faz muito tempo, vi uma foto. Acho que
00:29:07não lembro em qual conferência foi, mas lembro que um de vocês estava falando
00:29:11e havia uma imagem de uma comunidade que dizia algo como: "O Nuxt é sobre as pessoas".
00:29:16Parece que vocês têm uma comunidade incrível. Contem-nos sobre eles, onde
00:29:20podemos nos envolver, contribuir, etc. Contem-nos mais.
00:29:30Acho que o Daniel travou. Sim. Foi o Daniel no Vue.js Amsterdam, eu acho.
00:29:40E, sim, eu diria que, se quiser se juntar a nós, temos o servidor do Discord,
00:29:47que é muito ativo. Compartilhamos muitas notícias por lá. Temos o GitHub,
00:29:54onde as issues e os pull requests são onde o código é escrito de fato.
00:30:00É onde as ideias são implementadas e compartilhadas. Se você quiser nos ajudar, há muitas
00:30:07coisas: você pode ajudar com as issues, dar ideias, compartilhar sua experiência,
00:30:15compartilhar suas demos. Também temos a conta no Twitter @nuxt_js. Temos uma conta
00:30:20no BlueSky. Usamos o nuxt.com. Acho que temos uma conta no Mastodon, uma página
00:30:26de showcase no LinkedIn. Se você gosta do LinkedIn. Não temos página no Instagram,
00:30:31nem no SoundCloud, mas o Discord também é um lugar legal para passar o tempo. Se você
00:30:39tiver uma dúvida, é só falar conosco. Estamos lá também. E, sim,
00:30:46acho que todas as pessoas com quem compartilhamos... todos os módulos criados... tipo,
00:30:51você não precisa contribuir diretamente para o core. E acho que essa é uma das belezas
00:30:54do Nuxt: você pode começar com um template que queira compartilhar, ou pode começar com
00:31:00um módulo, porque você construiu uma funcionalidade através de um módulo e pode compartilhar
00:31:05com toda a comunidade. Acho que temos mais de 300 módulos mantidos para a versão atual
00:31:10do Nuxt, com mais de 1000 contribuidores. Então, por favor, venham passar um tempo com
00:31:17a gente. Vocês vão gostar. Vamos lá. Incrível. Daniel, acho que não conseguimos te ouvir.
00:31:27Sim. Mas ele disse que temos um SoundCloud, eu acho. Acho que ele teria algo a acrescentar sobre
00:31:51o lado da comunidade. Sim. Talvez ele esteja preparando a primeira faixa
00:31:55para o SoundCloud. Então, eu só quero dizer que a comunidade... e fico feliz que você tenha mencionado isso.
00:32:05Acho que a comunidade é a melhor parte do Nuxt. E acho que a...
00:32:13comunidade é a essência do código aberto, porque o código aberto
00:32:17é sobre eu pegar algo — ou qualquer um de nós — e dizer
00:32:21para outra pessoa: "Ei, o que você acha disso? Você gosta? Quer
00:32:26ajudar a torná-lo melhor?". E essa comunidade é o que faz
00:32:32o código aberto valer a pena. É por isso que o fazemos. É o objetivo de tudo. Eu acredito piamente
00:32:38que o arquivo contributing.md é mais importante que o agents.md. Eu preferiria ter zero
00:32:44agentes e muitas pessoas do que o contrário. O que faz valer a pena
00:32:50é o fato de haver pessoas com quem me importo que fazem parte de um projeto. E, honestamente,
00:32:56isso tem sido verdade não só no Nuxt, mas na comunidade Vue, por exemplo, que tem sido
00:33:00muito assim. Mas sim, é tudo sobre a comunidade e é sempre maravilhoso
00:33:06ver novas pessoas se juntarem e começarem a contribuir, a se tornarem parte disso. E isso inclui
00:33:12apenas vir pedir ajuda também. Devo dizer que foi assim que me envolvi: entrando
00:33:18e perturbando as pessoas no Discord para encontrar as respostas para minhas perguntas.
00:33:23Amo muito isso. Viva os humanos, viva a comunidade. Sim, você pode simplesmente lançar coisas
00:33:28e compartilhar com o mundo. Adoramos ver isso. Então, sim, vamos encerrar com
00:33:34vocês. Estou muito inspirada com a velocidade e a qualidade das coisas que vocês estão lançando,
00:33:40então estou super animada com a jornada do Nuxt e o que virá a seguir. Então, sim,
00:33:45muito obrigada a vocês, ao restante da equipe Nuxt, mantenedores, contribuidores
00:33:50e, claro, à comunidade Nuxt. Então, sim, obrigada Sebastian, Daniel e Hugo por estarem
00:33:55conosco hoje.
00:33:56Obrigado.
00:33:57Valeu.
00:33:58Tchau.
00:33:59E audiência, mais uma coisa. Não vão embora. Quero trazer a Eve da Versailles
00:34:07Academy.
00:34:08Olá, Maya.
00:34:09Olá, Eve. Bem-vinda de volta.
00:34:11Muito obrigada. Adoro ver você. Esta é a parte mais divertida do meu mês: lançar
00:34:18um curso e fazer bem pouco, só ouvindo todo mundo falar. E aquela equipe é cheia de feras (GOATs),
00:34:25são muito bons. Mas, sim, você também é uma fera. E eu adoraria saber mais
00:34:36sobre o que você preparou com o novo curso.
00:34:40Sim. Estamos super animados para lançar hoje um novo curso. Minha tela está compartilhada aí. Nuxt
00:34:48na Versailles. É um curso para quem está acostumado a trabalhar no mundo React. E ele
00:34:55fornece aquela camada de tradução entre projetos React e Nuxt. Então, se você está entrando
00:35:03em um novo emprego ou trabalhando em um projeto paralelo e pensa: "Eu quero muito usar
00:35:08isso, mas não sei por onde começar", este é o caminho. É claro que os agentes
00:35:12vão te ajudar a chegar lá também, e você deve usar todas essas ferramentas, mas isso te ajuda
00:35:16a construir um projeto. Construímos um app buscador de fontes termais para que você possa encontrar suas
00:35:24trilhas e fontes termais favoritas. E sim, confiram lá. Há muitos novos cursos chegando na
00:35:30Versailles Academy, fazendo um jabá aqui, mas este é o mais novo.
00:35:34Incrível. Muito obrigada, Eve. Para a audiência: a Eve tem os melhores cursos e ela
00:35:40realmente abraça o "construir para aprender". Então, com certeza, vão conferir. Vamos adicionar
00:35:45um link também para facilitar para vocês. Estou animada para fazer o curso
00:35:50e construir mais com Nuxt. Então, sim. Muito obrigada por se juntar a nós hoje. Obrigada. Ok.
00:35:59Obrigada. Chegamos ao fim da nossa sessão da comunidade. Muito obrigada à nossa comunidade
00:36:03por passar esse tempo conosco. Esperamos que tenham gostado. E se quiserem participar de futuras
00:36:09sessões, podem encontrar todos os detalhes em nossa plataforma em [community.versailles.com/live](https://community.versailles.com/live).
00:36:16Também temos muitos eventos vindo aí e sendo preparados. Confiram nossa página de eventos
00:36:20e nossa página de meetups para os eventos online e na sua região. E, por último, quentinho do forno,
00:36:26os ingressos foram liberados para o Versailles Ship, que será realizado em vários locais pelo
00:36:32mundo. Sim, super empolgante. Não deixem de acessar [versailles.com/ship](https://versailles.com/ship) e solicitar
00:36:37seus ingressos. E também vale a visita só pelo design e pelas interações.
00:36:43A equipe caprichou demais nesse. Então é isso por hoje. Muito obrigada a todos.
00:36:47Tenham um bom dia. Tchau.

Key Takeaway

O Nuxt evolui para uma plataforma otimizada para a era da IA através do protocolo MCP, renderização de Markdown com componentes via Comark e técnicas de AEO para facilitar o rastreamento por agentes inteligentes.

Highlights

  • O kit de ferramentas MCP permite que qualquer site Nuxt funcione como um servidor MCP integrado a sistemas de IA.

  • O projeto Comark extrai o núcleo do Nuxt Content para possibilitar o uso de Markdown com componentes em tempo de execução e suporte a streaming.

  • A detecção de agentes de IA via cabeçalho 'accept' ou 'user agent' permite servir páginas em Markdown moderno e JSON-LD para reduzir a janela de contexto.

  • As 'route rules' do Nitro permitem configurar ISR para blogs ou desativar SSR em painéis administrativos com poucas linhas de código.

  • O Nuxt 5 foca na integração com o Nitro 3 para aproximar o framework dos padrões nativos da web em ambientes como Bun, Deno e Node.

  • O site NPMX serve como um exemplo real de otimização na Vercel, utilizando cache de payload nativo do Nuxt 4.4.

Timeline

Integração de Agentes e Protocolo MCP

  • O código-fonte dos agentes implementados no site oficial do Nuxt é aberto para consulta e contribuição.
  • O kit de ferramentas MCP transforma sites Nuxt em servidores compatíveis com ecossistemas de inteligência artificial.
  • A API de módulos do Nuxt alimenta as ferramentas de desenvolvimento e permite conexões diretas entre IAs e aplicações.

A implementação de agentes de IA no ecossistema Nuxt foca na transparência, permitindo que desenvolvedores aprendam como os componentes de raciocínio foram construídos. O suporte ao Model Context Protocol (MCP) expande a utilidade do framework, transformando sites em fontes de dados estruturadas para modelos de linguagem. Essa arquitetura possibilita que ferramentas de desenvolvimento e chats integrados operem de forma unificada sob a mesma API de módulos.

Monitoramento e Feedback via Admin MCP

  • Um widget de feedback no site identifica páginas com baixa performance ou problemas de usabilidade.
  • O painel Admin MCP utiliza agentes de IA para analisar dados de feedback e sugerir melhorias específicas.
  • A análise automatizada de pequenas amostras de dados fornece pistas iniciais sobre a experiência do usuário em uma semana.

O uso de ferramentas administrativas baseadas em IA permite uma análise mais rápida do feedback qualitativo deixado pelos usuários. Ao conectar um agente de IA ao banco de dados de feedback, o sistema identifica automaticamente quais páginas possuem as piores pontuações médias. O agente processa comentários de texto para extrair sugestões de melhoria, mesmo quando o volume de dados é reduzido, como no caso de apenas três feedbacks em uma semana.

Evolução do Conteúdo com Comark e Streaming

  • O projeto Comark surge da colaboração entre as equipes do Nuxt e SvelteKit para criar um Markdown com componentes em tempo de execução.
  • A IA pode gerar landing pages completas ao transmitir Markdown puro que utiliza a sintaxe de componentes do Comark.
  • O suporte a streaming e fechamento automático de tags facilita a integração com respostas de modelos de linguagem em tempo real.

O Comark representa a extração do núcleo do Nuxt Content para um formato agnóstico e colaborativo. Essa ferramenta permite que componentes interativos sejam renderizados diretamente dentro de arquivos Markdown, eliminando barreiras entre conteúdo estático e dinâmico. Durante a geração por IA, a tecnologia de streaming garante que o conteúdo seja exibido conforme é criado, enquanto o sistema de ensino de sintaxe permite que a IA utilize componentes de design predefinidos na estrutura da página.

Otimização para Mecanismos de Resposta (AEO)

  • A estratégia de AEO foca em entregar conteúdo otimizado especificamente para rastreadores de IA e alto-falantes inteligentes.
  • O uso do cabeçalho 'accept' identifica se o requisitante é um agente de IA para servir versões em texto moderno ou JSON-LD.
  • A redução da janela de contexto é priorizada ao entregar dados estruturados diretamente para os modelos de linguagem.

O Nuxt está sendo posicionado como uma plataforma líder para a otimização em mecanismos de busca e resposta. A detecção inteligente de User Agents permite que o servidor decida entregar Markdown ou JSON-LD em vez de HTML complexo, facilitando o processamento pela IA e economizando tokens de contexto. Essas funcionalidades estão sendo testadas em módulos experimentais antes de uma possível integração ao núcleo do framework, garantindo que acompanhem a rápida evolução de padrões como o LLMs.txt.

Roteiro para Nuxt 5 e Nitro 3

  • O Nuxt 5 utiliza o Nitro 3 como motor principal para garantir máxima compatibilidade com padrões da web.
  • A arquitetura minimalista do servidor permite execução nativa em ambientes Bun, Deno e Node.
  • A versão nightly do Nuxt 5 já demonstra melhorias perceptíveis na experiência de desenvolvimento local.

O desenvolvimento do Nuxt 5 foca na modernização da infraestrutura através do Nitro 3, que atua como um wrapper de servidor minimalista. O objetivo é reduzir a abstração e utilizar APIs nativas da web, o que resulta em maior velocidade e portabilidade entre diferentes runtimes de JavaScript. O ecossistema está sendo preparado para essa transição para garantir que a mudança de versão seja sentida imediatamente pelos usuários através de performance e estabilidade.

Estratégias de Performance na Vercel

  • As 'route rules' permitem configurar ISR para caches de longa duração ou desativar SSR em rotas específicas como /admin.
  • O Nuxt 4.4 introduz o cache de payload para acelerar a navegação mesmo em páginas não pré-renderizadas.
  • O projeto NPMX demonstra a aplicação prática de busca antecipada de dados para experiências de carregamento instantâneo.

Otimizar o Nuxt na Vercel exige uma combinação de regras de rota granulares e gestão eficiente de cache. Ao utilizar a Geração Estática Incremental (ISR), desenvolvedores podem servir conteúdos como blogs com alta performance sem reconstruir todo o site. O novo sistema de cache de payload busca os dados necessários para a próxima página antes mesmo do clique do usuário, garantindo uma transição fluida que aproveita a infraestrutura de borda da Vercel.

Aprendizado e Transição de Frameworks

  • Templates mínimos funcionam como 'cristais de semente' que orientam IAs a construir projetos com boas práticas.
  • O Nuxt permite o desenvolvimento progressivo começando apenas com um arquivo app.vue básico.
  • O mapeamento de conceitos entre Svelte ou React para Nuxt via agentes de IA acelera a curva de aprendizado de novos desenvolvedores.

A natureza progressiva do Nuxt facilita a entrada de iniciantes, permitindo que funcionalidades como roteamento e busca de dados sejam adicionadas apenas quando necessário. O uso de IA é encorajado não apenas para gerar código, mas como um tutor que explica os conceitos de importação automática e arquitetura de componentes. Recomenda-se o uso de exercícios práticos e pausas para aprendizado para garantir que o desenvolvedor internalize o conhecimento em vez de apenas aceitar os resultados gerados pelo agente.

Ciclo de Lançamentos e Comunidade

  • O plano de lançamentos prevê uma nova versão major do Nuxt anualmente para acompanhar o ciclo do Node.js.
  • O ecossistema conta com mais de 300 módulos mantidos e 1.000 contribuidores ativos.
  • A compatibilidade futura é priorizada para que migrações entre versões major levem horas, não meses.

A filosofia de desenvolvimento do Nuxt encara o software como um organismo vivo que necessita de manutenção constante e adoção de novas práticas. A equipe trabalha para desmistificar o medo de mudanças quebras (breaking changes), focando em ferramentas de compatibilidade e documentação rigorosa. A comunidade, centralizada no Discord e GitHub, é o motor de inovação, permitindo que funcionalidades experimentais sejam testadas em cenários reais antes de se tornarem padrões do framework.

Community Posts

View all posts