paint-brush
Vue Amsterdam 2022 : Partie VIII - Le Web Nuxtpar@mohsenv
490 lectures
490 lectures

Vue Amsterdam 2022 : Partie VIII - Le Web Nuxt

par Mohsen Vaziri5m2022/08/09
Read on Terminal Reader
Read this story w/o Javascript

Trop long; Pour lire

Il s'agit de la partie VIII de la série Vue Amsterdam 2022 où nous examinerons le "Nuxt Web".

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Vue Amsterdam 2022 : Partie VIII - Le Web Nuxt
Mohsen Vaziri HackerNoon profile picture


Accueillir! Heureux de vous voir dans la septième partie de ma série de résumés Vuejs Amsterdam Conference 2022, dans laquelle je partage avec vous un résumé de toutes les discussions.


Vous pouvez lire ma série de résumés de la JSWorld Conference 2022 (en quatre parties) ici , où j'ai résumé toutes les discussions de la première journée. Vous pouvez également retrouver les précédents Talks de la conférence Vue Amsterdam 2022 sur mon blog.

(Récurrent) Présentation

Après deux ans et demi, JSWorld et Vue Amsterdam Conference étaient de retour au Theater Amsterdam entre le 1er et le 3 juin, et j'ai eu la chance d'assister à cette conférence pour la première fois. J'ai appris beaucoup de choses, rencontré beaucoup de gens formidables, parlé avec de grands développeurs et passé un bon moment. Le premier jour, la Conférence JSWorld a eu lieu, et les deuxième et troisième jours, la Vue Amsterdam.


La conférence a été pleine d'informations avec d'excellents orateurs, chacun d'entre eux m'a appris quelque chose de précieux. Ils voulaient tous partager leurs connaissances et leurs informations avec d'autres développeurs. J'ai donc pensé que ce serait formidable si je pouvais continuer à le partager et aider les autres à l'utiliser.


Au début, j'ai essayé de partager quelques notes ou diapositives, mais je trouvais que ce n'était pas assez bon, du moins pas aussi bon que ce que l'orateur partageait avec moi. J'ai donc décidé de revoir chaque discours, de les approfondir, de rechercher, de prendre des notes et de les combiner avec leurs diapositives et même leurs mots exacts dans leur discours, puis de le partager avec vous afin que ce que je partage avec vous soit au moins au au même niveau que ce que j'ai appris d'eux.

Un point très important

Tout ce que vous lisez au cours de ces quelques articles est le résultat de l'effort et du temps de l'orateur lui-même, et j'ai seulement essayé de les apprendre pour pouvoir les transformer en ces articles. Même la plupart des phrases écrites dans ces articles sont exactement ce qu'elles ont dit ou ce qu'elles ont écrit dans Slides. Cela signifie que si vous apprenez quelque chose de nouveau, c'est grâce à leurs efforts.


Enfin et surtout, je ne peux pas creuser dans tous les détails techniques ou les codages en direct dans certains des discours. Mais si vous êtes intéressé et avez besoin de plus d'informations, faites-le moi savoir et j'essaierai d'écrire un article plus détaillé séparément. Aussi, n'oubliez pas de consulter leur Twitter/Linkedin.


Vous trouverez ici le programme de la conférence.



Le Web Nuxt

Sébastien Chopin - Co-fondateur de Nuxt


Notre mission chez @nuxtlabs est de fournir la meilleure expérience développeur pour offrir la meilleure expérience utilisateur à vos utilisateurs finaux. Nous le faisons avec Nuxt depuis six ans maintenant.


Nuxt est un framework Web permettant de créer tout type d'application Vue. Cela signifie que vous pouvez faire :

  • Rendu latéral Servier (SSR)
  • Génération de site statique (SSG)
  • Rendu côté client (CSR)
  • Edge Side Rendering (ESR) grâce à Nuxt 3


Depuis le début de Nuxt en octobre 2016, il a été téléchargé environ 46 millions de fois sur npm, compte 300 000 sites Web en direct et 18 000 contributeurs GitHub.

Une comparaison entre Nuxt 2 et Nuxt 3

  • Serveur Web : Pour le serveur Web de développement et de production, Nuxt 2 utilise pour se connecter, qui est le cœur d'Express.js, mais pour Nuxt 3, ils ont créé h3 et cela fonctionne dans n'importe quel type d'environnement JavaScript.


  • Bundler : Webpack 4 est utilisé dans Nuxt 2, et pour Nuxt 3, ils ont commencé avec Webpack 5, mais après la sortie de Vite, il est officiellement pris en charge en tant que Bundler par défaut.


  • Framework UI : Vue 2 dans Nuxt 2 et Vue 3 dans Nuxt 3


  • Bibliothèque de routage : Vue Router 3 dans Nuxt 2 et Vue Router 4 dans Nuxt 3, qui ne seront pas inclus si aucune pages/ répertoire n'est trouvé.


  • Meta management : Nuxt faisant du SSR, il est important de pouvoir gérer les meta tags. Vue Meta est utilisé dans Nuxt 2 et VueUse Head dans Nuxt 3.


  • Conditionneur de serveur (sans) : Ceci est introduit dans Nuxt 3, qui compacte l'application nuxt pour la production en supprimant les node_modules afin que votre application Nuxt fasse environ 1 mégaoctet.


Ceci est une comparaison de taille de bundle hello world entre Nuxt 2 et Nuxt 3 :



L'une des raisons pour lesquelles Nuxt 3 est tellement plus petit est qu'il est arborescent, comme Vue 3. Donc, si vous n'utilisez pas une fonctionnalité, elle ne sera pas incluse dans le bundle.

La taille du bundle équivalent Next est d'environ 80 Ko.


Dans ce bundle Nuxt 3 JS, 25,3 Ko proviennent de Vue, et les 8,7 Ko restants incluent :

  • Entrée d'application avec hydratation
  • Composant racine avec <Suspense>
  • Routeur universel et léger : useRouter() , middleware et <NuxtLink>
  • Head composable & composants : useHead() , <Title> , <Meta> , <Script> , …
  • Récupération de données universelle : $fetch()
  • Pages d'erreur par défaut : 404 et 500
  • Plugins et logique runtimeConfig
  • useNuxtApp() composable et hooks : app:created , app:mounted , page:start , …

Rendu côté bord

Edge Side Rendering - également appelé conteneurs JavaScript par Ryan Dahl - est la capacité d'exécuter JavaScript sur les nœuds CDN quelque part dans le monde à proximité de l'utilisateur final.

Les avantages:

  • Exécute des millisecondes à partir des utilisateurs finaux
  • 0ms démarrages à froid
  • Aucun serveur à maintenir
  • Mise à l'échelle automatique
  • Abordable


Certains des fournisseurs d'informatique Edge en ce moment :

  • Travailleurs CloudFlare
  • Bord de Vercel
  • Netlifier Edge
  • Deno Deploy
  • Bord Lambda
  • StackPath

Contenu V2

Nuxt Content est un module Nuxt qui lit les fichiers Markdown, YAML, CSV et JSON dans le répertoire content/ pour créer une couche de données puissante pour votre application et Content V2 est maintenant disponible avec plus de fonctionnalités.

Nuxt 2.X

Quoi de neuf pour Nuxt 2.X :

  • Vue 2.7
  • Pont Nuxt (bêta)
    • Vite
    • Nitro
    • Configuration de l'API et du script de composition
    • Manuscrit
    • Nuxi CLI
    • PostCSS 8

Nuxt 3.0

Ce qui s'en vient pour Nuxt 3.0 :

  • Image Nuxt
  • Rendu hybride : Serveur + SWR + Pré-rendu
  • Génération statique complète
  • Mode aperçu
  • Sessions serveur et authentification
  • Travailleurs des services (PWA)
  • Aides SEO et support i18n



Fin du huitième discours

J'espère que vous avez apprécié cette partie et qu'elle peut être aussi précieuse pour vous qu'elle l'était pour moi. Au cours des prochains jours, je partagerai le reste des discussions avec vous. Restez à l'écoute…


Également publié ici .