▲ Session communautaire : Nuxt sur Vercel

VVercel
Computing/SoftwareAdult EducationInternet Technology

Transcript

00:00:00Et si je veux un portfolio, par exemple, ce n'est peut-être pas très important de le dire en utilisant cela, mais
00:00:13oui, vous avez directement ce que vous voulez et vous pouvez ensuite éditer rapidement votre projet.
00:00:29Alors voilà, je pense que c'est tout pour les agents pour le moment, je ne sais pas si nous avons d'autres idées.
00:00:38Vous pouvez mentionner les articles de blog où tout est détaillé pour expliquer comment cela a été
00:00:45implémenté, et le code source est également en open source.
00:00:49Si vous voulez approfondir la façon dont nous avons créé l'agent Nuxt sur le site web, quels composants
00:00:55nous utilisons pour afficher le raisonnement sur le côté, tout ce qui se passe sous le capot et
00:01:02si vous voulez contribuer pour y ajouter plus de fonctionnalités, je pense que c'est là que vous pouvez commencer
00:01:08à apprendre de lui.
00:01:11Et ce n'est pas la seule chose non plus, n'est-ce pas ?
00:01:13Parce qu'Hugo a construit le toolkit MCP, qui permet à n'importe quel site Nuxt d'être également un
00:01:22serveur MCP et d'être intégré à n'importe quelle IA qui le prend en charge.
00:01:30Et Nuxt.com est vraiment devenu le point central pour beaucoup de choses.
00:01:35On ne croirait jamais qu'il possède cette API.
00:01:39C'est donc notre API de modules qui alimente les outils de développement Nuxt.
00:01:42Il possède des serveurs MCP, beaucoup d'entre eux, auxquels vous pouvez vous connecter depuis votre application Nuxt, depuis
00:01:48votre agent IA, et maintenant il a été construit avec un chat.
00:01:53Je veux dire, quelqu'un doit arrêter Hugo.
00:01:55Il est... il est juste trop doué.
00:01:59Merci.
00:02:03Quelque chose qu'il a fait, euh, je vais essayer de partager tout mon écran, euh, que je trouve assez
00:02:10impressionnant.
00:02:11Je ne sais pas si vous voyez mon écran maintenant.
00:02:15Oui.
00:02:16Euh, c'est cet admin, donc je suis désolé, vous ne pourrez pas vous connecter à cet admin, mais
00:02:22nous avons ce widget sur le site web où vous pouvez, euh, donner votre avis.
00:02:27Et c'est en fait assez utile pour nous de savoir quelles sont les pages sur lesquelles se concentrer
00:02:32au fil du temps, euh, est-ce que ça s'améliore ?
00:02:37Et il a récemment lancé l'admin MCP où, euh, nous nous sommes branchés sur notre conversation et si je ne
00:02:47m'abuse ici.
00:02:50Je pourrais demander, euh, va sur l'admin MCP de Nuxt et donne-moi la page avec le moins de retours
00:03:04ou comment l'améliorer.
00:03:09Et de cette façon, normalement, si je l'ai configuré correctement, il devrait appeler, mais c'est
00:03:16l'admin, euh, oui.
00:03:23C'est ce que je pensais.
00:03:24Je pense que je dois utiliser l'agent appelé l'admin MCP de Nuxt et me parler des retours sur la page
00:03:35la moins performante et de la manière de l'améliorer.
00:03:42Peut-être qu'en cochant celle-ci, ce sera la bonne, ça devrait, oui.
00:03:56Ensuite, il nous dit que cette page a, euh, un score moyen.
00:04:00Nous n'avons eu que trois retours, mais de cette façon, nous sommes capables de comprendre, euh, quelques pistes sur la manière
00:04:07d'améliorer cette page.
00:04:09C'est probablement parce que ce n'est qu'une semaine de retours.
00:04:12Nous pouvons en demander plus.
00:04:14Oui, exactement.
00:04:17Et autre chose sur laquelle nous avons travaillé, euh, vous avez mentionné Nuxt Content et Nuxt Content
00:04:21est notre CMS de base où nous, euh, avons toute notre documentation dans le DOM et nous pouvons utiliser
00:04:29un composant à l'intérieur du Markdown.
00:04:32Ces derniers mois, nous avons travaillé sur un projet nommé Comark.
00:04:36Nous avons donc extrait le cœur du contenu afin de pouvoir l'utiliser, euh, pour l'ouvrir et
00:04:44collaborer avec l'équipe Svelte ainsi qu'avec l'équipe Nuxt pour avoir ce Markdown avec
00:04:50des composants au moment de l'exécution.
00:04:53Et pendant que nous parlons d'IA, euh, ce projet prend également en charge le streaming et l'auto-fermeture.
00:05:00Nous avons donc, euh, une fonctionnalité en cours, euh, qui se passe ici, euh, celle-ci, c'est la pire, euh,
00:05:10pouvoir dire, génère-moi la page sur, euh, disons les chaussures de basket.
00:05:20Et nous pouvons, euh, pour l'instant l'IA streame essentiellement du pur Markdown, mais en exploitant
00:05:26et en apprenant à l'IA à utiliser cette syntaxe, elle peut commencer à générer, euh, des pages de destination, euh,
00:05:33en utilisant ces, euh, composants sous le capot.
00:05:37C'est donc un progrès à un stade très précoce, mais c'est, euh, assez prometteur et nous voulons,
00:05:44euh, nous travaillons pour l'ouvrir à tout le monde dans la V1 dans les prochaines semaines.
00:05:51Et voilà pour le, euh, progrès actuel du Markdown.
00:05:56Et oui, je pense que c'est peut-être, euh, Daniel a peut-être des progrès qu'il veut partager.
00:06:01Ou je vois juste qu'il est parti.
00:06:03Oh, il est de retour.
00:06:04Juste à temps.
00:06:05Il est de retour.
00:06:06Bonjour.
00:06:07Bienvenue.
00:06:08Vous savez, j'aime bien vous garder sur le qui-vive.
00:06:17Euh, oui, je parlais de Comark et de Nuxt Content, euh, je veux dire, Nuxt Content avant, et
00:06:28ensuite je me suis dit, Daniel a peut-être quelque chose à mentionner.
00:06:30Et puis, euh, j'ai compris ce que tu cherchais après l'appel.
00:06:35Eh bien, euh, oui.
00:06:37Euh, donc je pense, euh, l'un des points très intéressants, je ne sais pas si c'est, combien de personnes
00:06:44écoutent ceci ?
00:06:45Comment dévoiler quelques secrets sur des choses auxquelles nous pensons travailler ?
00:06:52Donne aux gens ce qu'ils veulent, ne le dis, ne le dis à personne, d'accord ?
00:06:57C'est juste entre nous et les amis très proches qui écoutent en ce moment, euh, nous parlons
00:07:12de la manière d'améliorer notre Nuxt.
00:07:14Donc pas depuis très longtemps il y a eu cela, euh, et cela chevauche un peu
00:07:19ce côté spécial, mais Nuxt a été pendant très, très longtemps, euh, une solution
00:07:25pour le SEO.
00:07:26Donc les gens ont, euh, utilisé Nuxt pour obtenir d'excellents résultats sur les moteurs de recherche
00:07:33immédiatement.
00:07:34En fait, je pense que pendant un certain temps, Nuxt était en tête des résultats de recherche pour Next.js,
00:07:42mais c'est exact, euh, Sebastian, tu t'en souviens aussi, n'est-ce pas ?
00:07:46Les gens cherchaient Next et Nuxt arrivait en tête de liste, et ce n'est plus
00:07:50vrai.
00:07:51Nous ne sommes absolument plus classés pour Next désormais.
00:07:53Euh, mais nous réfléchissons à ce que nous pouvons faire avec des outils comme Nuxt Content pour que Nuxt
00:07:59soit la meilleure, soit une plateforme phénoménale pour l'optimisation pour les moteurs de recherche.
00:08:05Alors ce que vous faites quand les gens cherchent réellement des informations sur votre produit ou autre,
00:08:10c'est qu'ils pourraient utiliser, euh, d'autres choses comme un agent, ou peut-être qu'ils
00:08:16utilisent une enceinte connectée ou quelque chose comme ça.
00:08:19Euh, comment obtiennent-ils des informations sur votre site ?
00:08:22Et il y a beaucoup de choses que nous avons prévues à ce sujet.
00:08:24Je ne dirige pas ce projet pour être clair, mais au sein de l'équipe nous le faisons, et je ne veux pas
00:08:28dévoiler trop de secrets, mais c'est quelque chose qui vaut la peine d'être mentionné peut-être, euh, quand il
00:08:33s'agit de penser à de nouvelles choses cool qui pourraient se passer du côté de Nuxt Content.
00:08:37des choses.
00:08:38Oui.
00:08:39Merci.
00:08:40Si vous, euh, si vous regardez les récentes pull requests sur le dépôt Nuxt.com, ou la
00:08:47documentation de Nuxt UI, Benjamin et Hugo ont poussé plus d'optimisations, euh, AEO.
00:08:53Donc fondamentalement, si un agent essaie de, euh, crawler la documentation Nuxt, si nous le
00:09:00détectons avec l'en-tête "accept", en attendant du texte moderne, alors nous servons les pages
00:09:06modernes directement, de même si nous détectons le "user agent", nous le faisons aussi pour toutes les pages,
00:09:13nous essayons d'ajouter le JSON-LD, donc plus de contenu pour que les agents, euh, comprennent ce
00:09:19qu'ils crawlent, pour leur donner, pour réduire aussi la fenêtre de contexte, comme en leur
00:09:24donnant le contenu directement.
00:09:26Et jusqu'à présent, nous expérimentons et nous réfléchissons aux fonctionnalités qui pourraient faire partie du
00:09:31cœur ou de notre module de base, euh, mais pour cela, avant de refactoriser et d'essayer de
00:09:36penser à quelque chose d'agnostique, nous devons d'abord, euh, l'expérimenter nous-mêmes, euh, et oui, et
00:09:42voir comment la communauté, euh, l'adopte et si cela a réellement du sens parce que cela évolue
00:09:48si vite.
00:09:49Nous avons parlé de LLMs.txt, de MCP, maintenant il s'agit d'accepter un markdown comme en-tête.
00:09:56Comment cela se passera-t-il dans, euh, dans deux semaines ?
00:09:58Euh, donc nous ne voulons pas pousser de fonctionnalités directement dans le cœur si nous devons les déprécier, euh,
00:10:06plus tard.
00:10:07Nous avançons donc étape par étape là-dessus, mais en expérimentant chaque fois que nous le pouvons.
00:10:16Je pense que l'une des choses que j'aime à propos de Nuxt, et je veux dire, nous avons parlé de l'écosystème des modules
00:10:21et du fait qu'il est possible de l'étendre.
00:10:24Cela signifie qu'il est possible de construire des choses comme celles-ci qui n'entrent pas dans le cœur et elles
00:10:28n'ont pas besoin d'y entrer, elles peuvent être une expérience.
00:10:31Elles peuvent être quelque chose que les gens utilisent en production, qu'ils utilisent sur leurs sites web et nous pouvons vraiment
00:10:35obtenir des retours, euh, pas seulement des retours conceptuels ou des retours sur une RFC, mais des retours réellement
00:10:42pratiques sur, euh, des projets du monde réel ou des cas d'utilisation du monde réel.
00:10:46Euh, avant que nous devions, vous savez, euh, prendre la décision de savoir si quelque chose devient
00:10:53un module de base ou non.
00:10:56Je ne vois pas s'il y a des questions dans le chat, euh, sur le chat en direct, auxquelles nous
00:11:07pourrions répondre ou.
00:11:08Euh, j'ai une question et je sais que vous avez déjà partagé un peu ce que, euh, les secrets
00:11:15de ce sur quoi vous travaillez, mais y a-t-il quelque chose, euh, à venir qui vous passionne particulièrement
00:11:20à propos de Nuxt et que vous pouvez partager ?
00:11:32Il y a beaucoup de choses qui me passionnent, mais, euh, je ne veux pas, euh, quoi,
00:11:40l'une des choses est que nous travaillons pour que tout soit prêt pour la prochaine version
00:11:44cinq.
00:11:45C'est quelque chose dont nous parlons depuis un moment.
00:11:47Euh, Nitro version trois, euh, était, est la fonctionnalité principale que cela apporte, euh, et préparer
00:11:55l'écosystème pour ce changement est un gros travail, mais c'est vraiment
00:12:01la bonne direction.
00:12:02Nitro nous rapproche donc des standards du web.
00:12:05Donc vraiment, vraiment minimal, euh, serveur, euh, enveloppe qui est autant que possible en mode natif,
00:12:12euh, peu importe ce que c'est, que ce soit Bun, Deno, Node ou autre.
00:12:18Euh, et je pense que le changement va être quelque chose dont les gens se sentiront immédiatement
00:12:24très heureux, euh, la version cinq nightly, euh, localement.
00:12:31Et c'est déjà un vrai plaisir à utiliser, même si ce n'est pas encore sorti en
00:12:36beta ou même en alpha.
00:12:38Sympa.
00:12:39Je sais que nous avons eu un commentaire de la communauté, euh, quelqu'un a dit être très enthousiaste pour la V5.
00:12:45Euh, et une autre question également, euh, quelles sont vos meilleures recommandations/astuces pour
00:12:50optimiser les charges de travail Nuxt sur Vercel ?
00:12:53Hugo, veux-tu commencer, par exemple sur l'optimisation de Nuxt sur Vercel, euh, parce que c'est genre,
00:13:07ça dépend de quelle manière, par exemple, qu'entendez-vous par optimisation, comme l'optimisation,
00:13:14est-ce pour la vitesse, pour le build, pour l'exécution ?
00:13:19Oui, je pense qu'il y a plusieurs façons, mais, euh, oui, j'irai au moins pour la partie
00:13:28exécution (runtime).
00:13:29Euh, et je pense que c'est quelque chose que nous essayons toujours de comprendre, c'est comment dans Nuxt nous pouvons
00:13:36suggérer à l'utilisateur que cette page pourrait être mise en cache ou rendue, euh, c'est toujours délicat
00:13:44car nous pouvons avoir des composants qui font de la récupération de données que vous pouvez utiliser dans les pages.
00:13:49Vous pouvez avoir l'authentification directement dans votre ancienne application.
00:13:53Donc de cette façon, vous ne voulez pas mettre en cache, ou si vous commencez à mettre en cache des pages, euh, avec
00:13:58l'authentification, disons que vous avez un en-tête et que vous affichez l'utilisateur authentifié.
00:14:03Alors vous voulez vous assurer que vous, euh, pré-rendez un espace réservé, en vous
00:14:09assurant que vous n'avez pas cette erreur d'hydratation parce que vous avez réalisé du côté client
00:14:13que vous êtes authentifié.
00:14:14Donc, euh, je dirais que dans Nuxt, nous avons cette fonctionnalité très puissante qui vient aussi
00:14:21de Nitro.
00:14:22Cela s'appelle les "route rules" (règles de routage).
00:14:24Avec ces règles de routage, vous pourrez mentionner une partie des routes en utilisant des modèles.
00:14:29Vous pouvez donc dire ce groupe, comme disons que j'ai un admin, un admin intégré, slash admin,
00:14:35euh, désactivez le SSR.
00:14:37Je n'en ai pas besoin pour cette partie, euh, le slash blog, étoile étoile, euh, ensuite vous les mettez
00:14:45en ISR, euh, parce que nous ne lisons pas les articles de blog toutes les secondes.
00:14:50Vous pouvez donc tirer parti de la génération statique incrémentale dans cette version.
00:14:55Avec ces règles de routage, vous seriez capable d'optimiser une partie de vos applications avec juste quelques
00:15:01lignes de configuration.
00:15:03Et ce serait ma plus grande recommandation avant de passer en production.
00:15:10Vérifiez vos règles de routage.
00:15:12Génial.
00:15:13Merci.
00:15:14Une chose qui... vas-y.
00:15:18Oh, pardon.
00:15:20Une chose qui vaudrait peut-être la peine d'être vérifiée est NPMX.
00:15:23NPMX, si vous ne connaissez pas, c'est un... c'est un remplaçant pour npmjs.com.
00:15:30C'est donc un navigateur pour NPM, le registre, euh, et c'est construit en Nuxt et hébergé
00:15:36sur Vercel et nous l'avons vraiment hautement optimisé pour la performance.
00:15:42Si vous cherchez comment optimiser quelque chose pour la performance sur Vercel, et que vous voulez
00:15:45voir à quoi ressemblent certaines de ces choses dans une application réelle que nous avons conçue pour
00:15:49supporter énormément de vues de pages, il y a tellement de gens qui l'utilisent, euh, alors allez voir.
00:15:58Vous verrez donc les règles de routage, euh, en action, vous verrez la mise en cache.
00:16:01Nous utilisons, euh, nous mettons en cache avec la génération statique incrémentale.
00:16:09Donc en construisant et en mettant en cache les payloads efficacement, euh, quand c'est nécessaire nous utilisons la nouvelle fonctionnalité
00:16:17de Nuxt 4.4, qui est un cache de payload, même pour les pages non pré-rendues, ce qui est,
00:16:27pour moi, très cool.
00:16:28Euh, cela signifie que vous bénéficiez des avantages de la récupération des données avant même de vous déplacer vers une page.
00:16:34Ainsi, les données qui seront requises par cette page sont déjà récupérées par le framework à l'avance.
00:16:39Euh, et cela permet d'obtenir une expérience vraiment, vraiment rapide.
00:16:45Et il y a bien d'autres choses encore, euh, que vous pourriez repérer et peut-être essayer sur
00:16:52votre site web.
00:16:53Incroyable.
00:16:54Merci.
00:16:55On a aussi eu un commentaire : quelqu'un a dit qu'il n'avait jamais essayé Nuxt,
00:17:03mais que ça vaudrait peut-être le coup maintenant.
00:17:04On a donc des gens curieux de découvrir Nuxt dans l'assistance. Pour eux,
00:17:09quelle est la meilleure façon de commencer avec Nuxt ?
00:17:12Je sais qu'on a déjà mentionné des outils d'IA, mais avez-vous
00:17:16d'autres recommandations ?
00:17:17Je pense que pour l'instant, comme nous avons les agents Nuxt, ils peuvent donner
00:17:24de très bons conseils sur par où commencer, si vous voulez utiliser un modèle
00:17:29ou partir de zéro en utilisant la documentation.
00:17:31On a beaucoup de modèles sur Nuxt.com, mais aussi sur Nuxt UI,
00:17:39et on a aussi Nuxt.new qui propose d'autres modèles. Mais oui, on peut demander
00:17:48directement à l'agent maintenant.
00:17:51Aussi, sur la documentation de Nuxt UI, vous pouvez déjà l'ouvrir dans v0
00:17:57si vous voulez juste discuter avec le projet avant de passer à l'IDE et de coder.
00:18:08Je pense que souvent, pour débuter... enfin, je n'ai jamais eu de problèmes
00:18:12à partir de zéro, mais j'aime personnellement avoir au moins un projet minimal cloné.
00:18:17J'ai donc mon propre modèle sur GitHub, Daniel Rose slash Nuxt-site-template.
00:18:23...
00:18:24Vous pouvez le cloner.
00:18:25C'est très minimaliste, mais il y a des choses comme des tests unitaires,
00:18:31ce genre de choses qui indiquent aux LLM que je veux continuer
00:18:37à construire le projet de cette manière.
00:18:38Je trouve que ces modèles minimaux sont un peu comme des germes de cristal pour
00:18:44les LLM.
00:18:45Ils les orientent dans la bonne direction et donnent l'impulsion nécessaire
00:18:50pour que le projet se développe comme vous le souhaitez probablement.
00:18:52Et en réalité, vous n'avez besoin de rien de spécial en plus de cela.
00:18:56Même si vous pouvez ajouter des choses, rien de spécial n'est requis.
00:19:01Vous pouvez juste commencer avec un modèle ou un projet de base Nuxt et dire :
00:19:09"Voici ce que je veux construire."
00:19:10Et j'ai trouvé que les LLM sont phénoménaux pour ça.
00:19:12Ils n'ont aucun problème.
00:19:14L'essentiel, selon moi, avec toute nouvelle chose que vous essayez, c'est de créer
00:19:19des opportunités d'apprendre et de ne pas viser seulement le résultat, d'accord ?
00:19:24C'est génial visuellement, mais comment savoir si on a vraiment essayé ?
00:19:29Vous n'avez pas vraiment testé Nuxt si tout a été créé pour vous.
00:19:33Donc, si vous pouvez trouver l'occasion de demander au LLM : "Fais-moi faire le tour",
00:19:40"enseigne-moi les fonctionnalités de Nuxt en utilisant ce que tu as construit".
00:19:45Ce genre de choses est très utile car ça permet de faire le lien. C'est utile
00:19:49pour vous quand vous examinez le code qui a été créé.
00:19:51Et de deux, vous apprenez, vous acquérez de nouvelles compétences et de l'expérience.
00:19:56Le Dr Cat Hicks, cherchez-la sur GitHub.
00:20:02Elle a produit des "Claude skills" pour créer des opportunités d'apprentissage
00:20:07avec tout ce que vous faites, des petits exercices de 10 minutes au milieu des défis de code
00:20:12qui vous permettent d'essayer d'intérioriser ce sur quoi votre agent travaille.
00:20:17Nous avons un accès sans précédent à des connaissances qu'on ne maîtrisait pas,
00:20:22on peut faire des choses qu'on ne savait pas faire il y a six mois. L'essentiel est de
00:20:29continuer à grandir et à se développer personnellement, et d'intégrer
00:20:35ces habitudes, ces compétences et ces pauses d'apprentissage. C'est crucial
00:20:41si nous voulons que nos cerveaux continuent de se développer.
00:20:46C'est un excellent point. En tant que nouvel utilisateur de Nuxt également,
00:20:56venant principalement de Svelte, j'ai aussi demandé à mon agent de faire le lien
00:21:02entre les concepts de Svelte et de Nuxt. Je confirme donc l'utilité des agents pour apprendre.
00:21:08Quelqu'un veut ajouter quelque chose ? Désolé. C'est super, et je pense que...
00:21:17Je partage à nouveau mon écran. Nuxt est vraiment un framework progressif.
00:21:26On a fait en sorte que vous puissiez lancer un projet minimal avec un seul fichier app.vue.
00:21:32C'est votre base principale. Ensuite, vous pouvez ajouter progressivement le routage et le fetching.
00:21:40Nous avons cette fonction d'auto-importation, l'une des meilleures améliorations
00:21:45pour l'expérience développeur. Et maintenant avec l'essor de l'IA,
00:21:51vous pouvez de toute façon la désactiver si vous préférez avoir les imports directement
00:21:56dans votre code. Mais pour moi, c'est vraiment la meilleure façon de commencer.
00:22:03Nous avons aussi des EVALS. Nous les faisons tourner sur Nuxt avec différents modèles.
00:22:11Et jusqu'ici, même sans configurer l'agent avec un fichier .m ou agent.md,
00:22:21ils maîtrisent plutôt bien la plupart des connaissances sur Nuxt. En plus,
00:22:28si vous utilisez MCP, je dois vérifier où ils se trouvent exactement,
00:22:35mais nous avons ce serveur MCP que vous pouvez ajouter directement à votre code. Donc oui.
00:22:49Nous sommes propulsés par l'IA, mais même sans ajouter le serveur MCP,
00:22:57les agents sont déjà performants. Ce que je recommande, c'est d'essayer une config minimale
00:23:03et d'ajouter des fonctions étape par étape. Et si vous utilisez l'IA pour cela,
00:23:10demandez-lui d'expliquer pourquoi. C'est la clé, comme disait Daniel,
00:23:16pour garder son cerveau actif autant que possible. On a d'autres questions
00:23:25pour finir cette section. Une question du chat : "Je vois Nuxt beaucoup utilisé dans
00:23:30la communauté e-commerce allemande. Pensez-vous que Nuxt soit plus populaire en Europe
00:23:36qu'aux États-Unis ou est-ce équilibré ?"
00:23:42Je suis basé à Édimbourg, Sebastian et Hugo sont à Londres. Maya, tu es
00:23:51basée en Europe aussi. J'ai l'impression d'être la mauvaise personne à qui demander
00:23:57si Nuxt est populaire aux USA, mais mon sentiment est qu'il l'est plus en Europe.
00:24:02Parfois, c'est comme ça. React tend à être plus populaire en Amérique du Nord.
00:24:09Vue était bien plus populaire ailleurs dans le monde, et c'est aussi vrai pour Nuxt.
00:24:15Mais on doit changer ça. Il nous faut plus d'utilisateurs aux États-Unis, il nous faut
00:24:19un membre de l'équipe principale là-bas, ou quelque chose comme ça. Je ne sais pas.
00:24:25Nuxt partout dans le monde ! Question suivante venant de X : "Avec Nuxt qui évolue vite,
00:24:35quelle est la meilleure stratégie pour les équipes pour gérer les migrations en production
00:24:41en toute sécurité, surtout avec les changements SSR et Nitro ?"
00:24:50Entre Nuxt 3 et Nuxt 4,
00:24:58je crois qu'il n'y a eu presque aucun changement majeur cassant, ou ils étaient
00:25:03très bien documentés. Vous pouvez juste donner la page à votre IA pour qu'elle
00:25:11vous aide. Même sans IA, c'était assez facile de migrer.
00:25:17C'était seulement si vous utilisiez des fonctionnalités très avancées que vous
00:25:21pouviez avoir des problèmes. L'équipe a fait en sorte que la mise à jour soit fluide.
00:25:27C'était plus dur de la version 2 à la 3, car il y avait aussi le passage de Vue 2 à Vue 3.
00:25:33C'était un framework différent avec une approche différente, celle de
00:25:40l'ère des composables. On a aussi choisi de réécrire tout le moteur serveur
00:25:46pour que ça fonctionne en environnement serverless avec de la performance.
00:25:53Pour la suite, la prochaine version majeure sera accessible et il y a
00:26:01cette compatibilité de port que nous avons construite. Cela signifie que vous pouvez
00:26:08anticiper le passage à la V5 ou aux nouvelles fonctionnalités à l'avance.
00:26:15Vous pouvez donc vous préparer, Daniel je te laisse continuer.
00:26:22C'est l'un des points clés : nous voulons une compatibilité ascendante et descendante.
00:26:26Et pour le passage de la version 3 à la 4,
00:26:34on voulait délibérément prouver qu'il ne faut pas avoir peur des changements cassants
00:26:39dans Nuxt, ni des versions majeures. Parfois, on a l'impression
00:26:45d'être bloqué en se disant : "On ne peut pas sortir de version majeure."
00:26:50Notre plan est d'en sortir une nouvelle chaque année au moins.
00:26:57C'est intéressant car ça correspond à beaucoup d'autres projets. Si vous regardez Node,
00:27:01leur nouveau calendrier de sorties avec des versions majeures chaque année
00:27:09correspond bien au nôtre. En général, le modèle est le suivant :
00:27:15quand on utilise Nuxt, on l'utilise pour construire un projet comme une maison.
00:27:21Votre projet est vivant. Comme une maison, il a besoin de peinture et de retouches.
00:27:28Vous voulez que votre site adopte les meilleures pratiques d'aujourd'hui,
00:27:33pas seulement celles de l'époque où vous l'avez écrit. C'est pourquoi Nuxt doit évoluer.
00:27:38Il doit vous offrir ce dont vous avez besoin pour un super site. Et ces derniers
00:27:46mois, on a vu des attaques sur la chaîne d'approvisionnement NPM.
00:27:52Cela renforce la nécessité de garder toutes vos dépendances à jour
00:27:57et de suivre les dernières versions. Notre responsabilité
00:28:03en tant que créateurs de paquets est de s'assurer que ces étapes de mise à jour
00:28:08soient aussi indolores que possible. Donc, si vous trouvez que mettre à jour
00:28:14Nuxt est pénible, c'est un problème. Dites-le-moi, plaignez-vous auprès de moi,
00:28:21car on ne veut pas que ce soit le cas. On ne veut pas que les gens se demandent
00:28:25comment mettre à jour, on veut qu'ils disent : "C'est un plaisir, ça m'a pris
00:28:29une demi-journée pour cette version majeure, pas deux mois."
00:28:36On veut optimiser cela pour plein de raisons, pas seulement pour les sites web,
00:28:42mais pour tout l'écosystème. On veut que les gens n'aient pas peur des mises à jour.
00:28:47Et si vous voulez contacter Daniel, il est sur BlueSky à @roe.dev.
00:28:54On me trouve presque partout. Super, merci. Je voudrais finir
00:29:01avec des questions sur la communauté. Il n'y a pas longtemps, j'ai vu une photo,
00:29:07je ne me rappelle plus de quelle conférence, mais l'un de vous parlait
00:29:11devant une image de la communauté disant que Nuxt, c'est avant tout les gens.
00:29:16Vous semblez avoir une communauté incroyable. Dites-nous comment
00:29:20s'impliquer, contribuer, etc. Dites-nous en plus.
00:29:30Je crois que Daniel est figé. Oui, c'était Daniel Turk à Vue.js Amsterdam, je crois.
00:29:40Si vous voulez nous rejoindre, nous avons un serveur Discord très actif.
00:29:47On y partage énormément de nouvelles. On a aussi GitHub,
00:29:54les "issues" et les "pull requests" où le code est écrit.
00:30:00C'est là que les idées sont partagées et implémentées. Si vous voulez aider,
00:30:07vous pouvez aider sur les tickets, donner des idées, partager votre expérience
00:30:15ou vos démos. On a aussi le compte Twitter @nuxt_js, un compte BlueSky,
00:30:20notre site nuxt.com. On a aussi un compte Mastodon et une page
00:30:26LinkedIn. Si vous aimez LinkedIn... on n'a pas de page Instagram,
00:30:31ni de SoundCloud, mais Discord est aussi un super endroit pour traîner.
00:30:39Si vous avez une question, venez discuter. On y est aussi. Et puis,
00:30:46il y a tous les créateurs de modules. Vous n'avez pas besoin
00:30:51de contribuer directement au cœur du projet. C'est la beauté
00:30:54de Nuxt : vous pouvez commencer par partager un modèle, ou créer
00:31:00un module pour une fonctionnalité que vous avez construite, et le partager
00:31:05avec toute la communauté. Je crois qu'on a plus de 300 modules maintenus
00:31:10pour la version actuelle avec plus de 1000 contributeurs. Alors s'il vous plaît,
00:31:17venez nous voir. Vous allez adorer. Daniel, on ne t'entend pas.
00:31:27Il disait qu'on a un SoundCloud, je crois ! Il avait sûrement quelque chose à ajouter.
00:31:51Il est peut-être en train de préparer le premier morceau pour SoundCloud !
00:31:55Je voulais juste parler de la communauté, je suis ravie que tu l'évoques.
00:32:05C'est la meilleure partie de Nuxt. Pour moi, c'est l'essence même
00:32:13de l'open source. C'est prendre quelque chose et dire à quelqu'un d'autre :
00:32:17"Hé, qu'est-ce que tu en penses ? Ça te plaît ? Tu veux
00:32:21aider à l'améliorer ?" C'est cette communauté
00:32:26qui rend l'open source digne d'intérêt. C'est pour ça qu'on le fait.
00:32:32Je crois fermement que le fichier contributing.md est plus important que agent.md.
00:32:38Je préférerais avoir zéro agent et beaucoup de gens que l'inverse. Ce qui donne
00:32:44de la valeur au projet, ce sont les gens auxquels je tiens qui en font partie.
00:32:50C'est vrai pour Nuxt, mais aussi pour la communauté Vue par exemple.
00:32:56C'est toujours merveilleux de voir de nouvelles personnes arriver, contribuer
00:33:00et s'intégrer. Et ça inclut aussi le fait de venir demander de l'aide.
00:33:06C'est comme ça que j'ai commencé, en venant harceler les gens sur Discord
00:33:12pour trouver des réponses à mes questions.
00:33:18J'adore ça. Vive les humains, vive la communauté ! On peut juste sortir des choses
00:33:23et les partager avec le monde. On adore voir ça. On va conclure
00:33:28avec vous. Je suis tellement inspirée par la cadence et la qualité de ce que
00:33:34vous sortez. Je suis impatiente de voir la suite de l'aventure Nuxt.
00:33:40Merci beaucoup à vous, à l'équipe Nuxt, aux mainteneurs, aux contributeurs
00:33:45et bien sûr à la communauté. Merci Sebastian, Daniel et Hugo d'être venus.
00:33:50...
00:33:55Merci.
00:33:56Merci !
00:33:57Merci.
00:33:58Salut.
00:33:59Et cher public, une dernière chose : ne partez pas. J'accueille Eve de la
00:34:07Versailles Academy.
00:34:08Bonjour Maya.
00:34:09Bonjour Eve. Re-bienvenue.
00:34:11Merci beaucoup. C'est le moment le plus sympa de mon mois : lancer
00:34:18un cours en écoutant tout le monde parler. Cette équipe est remplie de génies.
00:34:25Toi aussi d'ailleurs ! J'aimerais en savoir plus sur ce que
00:34:36tu as préparé avec ce nouveau cours.
00:34:40On est ravis de lancer aujourd'hui un nouveau cours : Nuxt sur Versailles.
00:34:48C'est un cours pour ceux qui ont l'habitude de React. Il sert de
00:34:55passerelle entre les projets React et Nuxt. Si vous commencez un
00:35:03nouveau job ou un projet perso et que vous vous dites : "Je veux l'utiliser,
00:35:08mais je ne sais pas par où commencer", c'est la solution. Bien sûr,
00:35:12les agents vous aideront aussi et vous devriez utiliser tous ces outils, mais ceci
00:35:16vous aide à bâtir un projet concret. On crée une appli de sources thermales
00:35:24pour trouver vos randonnées préférées. Allez voir, il y a plein de nouveaux
00:35:30cours qui arrivent sur Versailles Academy, celui-ci est le tout dernier.
00:35:34Génial. Merci Eve. Pour le public : Eve fait les meilleurs cours et elle
00:35:40prône vraiment l'apprentissage par la pratique. Allez voir ça, on mettra
00:35:45un lien. J'ai hâte de le suivre moi-même et de construire plus avec Nuxt.
00:35:50Merci de nous avoir rejoint aujourd'hui. On arrive à la fin
00:35:59de notre session communautaire. Merci à tous d'avoir passé ce moment avec nous.
00:36:03On espère que ça vous a plu. Pour les prochaines sessions,
00:36:09tous les détails sont sur [community.versailles.com/live](https://community.versailles.com/live).
00:36:16On a aussi beaucoup d'événements à venir. Allez voir notre page d'événements
00:36:20et de meetups pour ce qui se passe en ligne ou près de chez vous. Et enfin,
00:36:26tout juste arrivés : les billets pour Versailles Ship sont dispos.
00:36:32Ça aura lieu partout dans le monde. Allez sur [versailles.com/ship](https://versailles.com/ship)
00:36:37pour vos tickets. Ça vaut le détour, rien que pour le design et les interactions.
00:36:43L'équipe s'est vraiment surpassée. C'est tout pour moi. Merci à tous.
00:36:47Bonne journée. Salut !

Key Takeaway

Nuxt évolue vers un framework orienté IA en intégrant le support natif du protocole MCP, l'optimisation pour les moteurs de réponse (AEO) et un moteur Nitro v3 aligné sur les standards du web.

Highlights

  • Le toolkit MCP permet à n'importe quel site Nuxt de fonctionner comme un serveur Model Context Protocol pour s'intégrer aux agents IA.

  • Le projet Comark extrait le cœur de Nuxt Content pour offrir un rendu Markdown avec composants au moment de l'exécution, compatible avec Svelte et Nuxt.

  • L'utilisation des Route Rules dans Nitro permet d'optimiser les performances en désactivant le SSR pour l'admin ou en activant l'ISR pour le blog.

  • Nuxt 4.4 introduit un cache de payload automatique qui récupère les données nécessaires avant même que l'utilisateur ne navigue vers une nouvelle page.

  • La version 5 de Nuxt intégrera Nitro v3 pour un serveur minimaliste exploitant nativement les standards du web comme Bun, Deno ou Node.

  • L'optimisation AEO (Answer Engine Optimization) est testée via l'en-tête 'accept' pour servir du texte moderne ou du JSON-LD directement aux robots d'indexation d'IA.

Timeline

Intégration de l'IA et serveurs MCP dans l'écosystème Nuxt

  • Le site Nuxt.com sert désormais de point central pour les agents IA grâce à une architecture basée sur des serveurs MCP.
  • Le code source de l'agent Nuxt est disponible en open source pour permettre l'étude de l'affichage du raisonnement de l'IA.
  • Le toolkit MCP transforme n'importe quelle application Nuxt en une source de données structurées pour les modèles de langage.

L'infrastructure de Nuxt s'adapte pour devenir lisible par les machines autant que par les humains. L'API des modules alimente les outils de développement et permet une connexion directe entre les agents IA et les données du site. L'approche open source facilite la contribution communautaire pour ajouter de nouvelles fonctionnalités aux agents.

Analyse de données et retours utilisateurs via l'admin MCP

  • Un widget de feedback sur le site permet d'identifier les pages nécessitant des améliorations prioritaires.
  • L'admin MCP permet d'interroger les données de conversation pour obtenir des scores de performance moyens par page.
  • L'IA peut analyser une semaine de données pour suggérer des pistes concrètes d'optimisation de l'expérience utilisateur.

L'utilisation d'un agent spécifique nommé 'admin MCP de Nuxt' démontre la capacité du framework à traiter ses propres données analytiques. En demandant simplement à l'IA d'identifier la page la moins performante, l'équipe obtient une synthèse des retours et des conseils d'amélioration. Ce système repose sur une configuration précise des agents pour accéder aux données privées de l'administration.

Comark et génération de pages par streaming Markdown

  • Le projet Comark rend le moteur de Nuxt Content agnostique pour une collaboration avec d'autres frameworks comme Svelte.
  • Le support du streaming et de l'auto-fermeture des balises permet à l'IA de générer des interfaces complexes en temps réel.
  • L'IA apprend à utiliser une syntaxe spécifique pour transformer du pur Markdown en pages de destination riches en composants.

L'extraction du cœur de Nuxt Content permet de manipuler le Markdown avec des composants au moment de l'exécution. Cette technologie est exploitée pour permettre à une IA de 'streamer' du contenu qui se transforme instantanément en éléments d'interface utilisateur. La version 1 de ce projet est prévue pour une ouverture publique dans les semaines à venir.

Stratégies AEO et optimisation pour les agents de recherche

  • L'optimisation pour les moteurs de réponse (AEO) remplace progressivement les anciennes stratégies SEO centrées sur les mots-clés.
  • La détection des agents via l'en-tête 'accept' permet de servir directement du contenu Markdown ou JSON-LD.
  • L'ajout de données structurées réduit la fenêtre de contexte nécessaire aux robots d'IA pour comprendre la documentation.

L'équipe expérimente des techniques pour rendre la documentation de Nuxt plus accessible aux enceintes connectées et aux agents autonomes. En identifiant le 'user agent', le serveur peut envoyer une version simplifiée et optimisée de la page pour économiser des jetons de traitement. Ces fonctionnalités sont testées sur Nuxt UI avant d'être potentiellement intégrées au cœur du framework.

Nuxt 5 et techniques d'optimisation sur Vercel

  • La version 5 de Nuxt se concentre sur l'intégration de Nitro v3 pour une compatibilité native avec les runtimes modernes.
  • L'utilisation des Route Rules permet de configurer l'ISR sur les dossiers de blog pour éviter les rendus inutiles.
  • Le cache de payload de Nuxt 4.4 accélère la navigation en pré-chargeant les données des pages non pré-rendues.

L'optimisation sur Vercel repose sur une gestion fine de la mise en cache via le fichier de configuration. Il est recommandé d'utiliser l'Incremental Static Regeneration (ISR) pour les contenus qui ne changent pas fréquemment, comme les articles de blog. Le projet NPMX sert d'exemple concret d'application hautement optimisée utilisant ces payloads efficaces.

Apprentissage assisté par IA et migration sécurisée

  • Les modèles minimaux servent de 'germes de cristal' pour orienter les agents IA dans la bonne direction de développement.
  • La stratégie de migration de Nuxt privilégie des versions majeures annuelles avec une forte compatibilité ascendante.
  • L'apprentissage par la pratique est encouragé en demandant aux agents d'expliquer les concepts de Nuxt durant la génération de code.

Pour débuter, l'utilisation de modèles GitHub minimaux aide les LLM à comprendre la structure attendue du projet. L'équipe souligne l'importance d'utiliser l'IA non seulement pour le résultat, mais comme un tuteur capable de faire le pont entre différents frameworks. La transition entre Nuxt 3 et 4 a été conçue pour être indolore, prouvant qu'une version majeure ne doit pas nécessairement être synonyme de rupture technique complexe.

Écosystème et contribution communautaire

  • L'écosystème dispose de plus de 300 modules maintenus par plus de 1000 contributeurs actifs.
  • Le serveur Discord reste le point de rencontre principal pour obtenir de l'aide et partager des démos.
  • Un nouveau cours 'Nuxt sur Vercel' est lancé pour faciliter la transition des développeurs React vers Nuxt.

La force de Nuxt réside dans sa communauté et sa capacité d'extension sans toucher au cœur du projet. Les développeurs sont encouragés à partager des modèles ou des modules plutôt que d'attendre des fonctionnalités natives. Le nouveau contenu pédagogique de la Vercel Academy utilise une application concrète de randonnées pour enseigner les bases du framework.

Community Posts

View all posts