Comment développer de meilleures applications Vue avec Nuxt

Ces 10 fonctionnalités de Nuxt 3 peuvent améliorer le développement de votre application Vue au-delà de Vue seule.

😃 Si vous avez lu mes articles précédentstu sais que je suis une fille de Vue et que j’adore Nuxt ! 🦸‍♀️

En un mot, Nuxt est un framework puissant construit sur Vue qui donne des super pouvoirs à vos applications Vue.

Dans cet article, je discute de 10 fonctionnalités importantes de Nuxt 3 et des raisons pour lesquelles vous devriez en savoir plus sur ce framework si vous êtes familier avec Vue. C’est une autre courbe d’apprentissage, mais vous pourrez améliorer vos applications Vue et les faire passer au niveau supérieur. 🚀

Installer Nuxt

Créer un nouveau projet Nuxt est aussi simple que de taper npx nuxi@latest init dans votre terminal. Rendez-vous sur la page d’installation officielle pour plus de détails.

Mais d’abord, dites bonjour à TypeScript

JavaScript est génial, mais avez-vous déjà eu à faire face à une erreur de production que vous n’avez pas détectée dans l’environnement de développement ou de test en raison d’une incompatibilité de type ?!

Oui, oui, je l’ai fait, et de nombreux développeurs Web ont également dû faire face à cela. 🥺 Surtout quand on est dans une petite équipe et/ou quand on n’a pas de revues de code. 🤫 Cela arrive même, dans de très rares cas, dans de grandes équipes avec un serveur de staging, des revues de code et des environnements de pré-prod.

🙏 Alors rendez service à vous-même, à votre équipe et à vos clients et utilisez TypeScript pour éviter les bugs et maintenir la cohérence dans toute votre base de code. La bonne nouvelle est que Nuxt 3 a été conçu pour être un citoyen TypeScript de premier ordre. Pour être honnête, utiliser Nuxt 3 sans TypeScript me semble un choix étrange. L’une des raisons pour lesquelles presque tout le monde a opté pour l’API Composition est sa meilleure intégration avec TypeScript.

Pour vous donner un bon exemple, vous pourrez voir directement depuis votre éditeur lorsque vous envoyez quelque chose de mal à un accessoire de composant. Dans nos projets, nous plaçons généralement tous nos types dans un dossier appelé types à la racine. Je vais créer un fichier appelé bases.d.ts à l’intérieur avec le contenu suivant.

type BaseButtonColor = 'blue' | 'gray' | 'green'

Maintenant, dans mon BaseButton composant, j’utiliserai quelque chose appelé PropTypes (qui est automatiquement importé dans Nuxt) comme ceci :

<script lang="ts" setup>

const props = defineProps({
  color: {
    default: 'gray',
    type: String as PropType<BaseButtonColor>,
  },
})
</script>

Si j’essaie d’utiliser ceci BaseButton composant quelque part et ajoutez la couleur rouge, votre éditeur vous avertira que cet accessoire n’est pas correct.

Bien sûr, l’utilisation de TypeScript présente de nombreux autres avantages que vous découvrirez tout au long de votre parcours, mais croyez-moi, une fois que vous aurez effectué le changement, vous ne pourrez plus revenir en arrière. 😂

Fonctionnalité n°1 : Nuxt rend le routage plus intuitif !

Nuxt 3 est livré avec un automatique système de routage basé sur des fichiersqui simplifie la création et la gestion de vos itinéraires. Comme vous vous en souvenez, c’est différent de Vue, où vous devez définir vos itinéraires manuellement. Cela signifie que désormais, vous n’avez plus à vous perdre dans le labyrinthe que devient votre fichier de routeur lorsque votre application évolue. 😵‍💫

Dans Nuxt, la structure de vos fichiers dicte vos itinéraires. Chaque fichier est un itinéraire. Comme vous pouvez le voir dans la documentation, si vous structurez vos fichiers comme ceci, par exemple :

| pages/
---| about.vue
---| index.vue
---| posts/
-----| urn:uuid:5843ae05-2738-4119-a1d9-42059de981e1.vue

Cela générera automatiquement cette structure de routeur :

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "https://www.telerik.com/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/urn:uuid:5843ae05-2738-4119-a1d9-42059de981e1.vue"
    }
  ]
}

Pratique, non !? 🧞‍♀️

Je n’ai jamais eu de problèmes avec cela, je ne peux donc que vous recommander d’utiliser le routage du système de fichiers si vous l’aimez. C’est, selon moi, le meilleur moyen d’organiser rapidement votre candidature. Comme vous pouvez le constater, avec Nuxt, il y a un fichier de moins à gérer. 👩‍💻

Fonctionnalité n°2 : Nuxt utilise la convention sur la configuration

Que signifie la convention sur la configuration et pourquoi devrions-nous nous en soucier ? 🤔

Nuxt privilégie les conventions prédéfinies et les valeurs par défaut avisées plutôt que d’exiger des développeurs qu’ils configurent explicitement chaque aspect de leur application. Cette approche nous fait gagner beaucoup de temps et nous permet de nous concentrer sur l’écriture des parties uniques de notre application plutôt que sur la configuration de l’environnement. Bien sûr, cela signifie qu’il faut respecter les conventions, mais c’est un petit prix à payer pour les avantages que cela apporte.

C’est quelque chose que j’apprécie chez Nuxt. Tout est correctement organisé et vous n’avez pas besoin de beaucoup réfléchir à la structure de votre candidature. Vous suivez simplement les meilleures pratiques du framework. Par exemple, Nuxt comprend de puissants middlewares et systèmes de mise en page que vous pouvez utiliser dès le début. Et si vous avez besoin de créer votre propre bibliothèque de composants, utilisez simplement le Couches Nuxt car cela offre beaucoup de flexibilité (et croyez-moi, c’était plus difficile dans le passé ; J’ai même écrit un article à ce sujet). 🙆‍♀️

Note: Vous travaillez avec un niveau d’abstraction plus élevé et les choses peuvent parfois sembler magiques, mais la bonne nouvelle est qu’avec le Outils de développement Nuxtvous pouvez voir tout ce qui se passe sous le capot. 🧙‍♀️ PS Voici mon Commencez avec Nuxt DevTools morceau.

Un autre aspect puissant de Nuxt 3 est sa configuration d’exécution. Lorsque vous devez gérer différents environnements (développement, transfert, production) sans avoir besoin de reconstruire votre application, cette fonctionnalité vous permet de maintenir un comportement cohérent dans différents environnements avec un minimum d’effort.

Ce que je veux dire, c’est qu’en choisissant un framework qui adopte cette philosophie, vous améliorerez votre flux de travail de développement, conserverez un code plus propre et créerez facilement des applications évolutives. 👩‍💻

Fonctionnalité n°3 : Nuxt importe automatiquement tous vos composables

Une chose que j’apprécie chez Nuxt 3, c’est que tout ce qui est exporté dans votre dossier composable est disponible globalement dans votre application. C’est incroyablement pratique car cela rend notre expérience de développeur plus transparente (nous n’avons pas besoin de nous assurer que la bonne chose est importée). Vous avez également accès aux composables natifs ou provenant de modules comme useLocalePath, useI18n, useFetch, useAsyncData et bien d’autres encore. De plus, la gestion des cookies est facilitée grâce au useCookies composable. 🧙‍♀️

Note: Si vous avez besoin de voir tous les composables auto-importés, utilisez les DevTools en accédant aux importations ou aux composables.

Une chose que j’aime c’est d’avoir un composable useIcons où je mets toutes mes icônes au même endroit. De cette façon, je n’ai qu’à appeler getIcon('myIcon'). Par exemple, vous pouvez utiliser Iconifierqui est gratuit et contient des milliers d’icônes provenant de plusieurs packs.

const icons = {
  check: 'solar:check-circle-linear',
  chevronLeft: 'solar:alt-arrow-left-linear',
  chevronRight: 'solar:alt-arrow-right-linear',
} as const

export function getIcon(attribute: keyof typeof icons) {
  return icons[attribute] || icons.default
}

export type UIcon = keyof typeof icons

Fonctionnalité n°4 : Nuxt est livré avec différents modes de rendu pour de meilleures performances

Comme Next pour React, l’une des fonctionnalités phares de Nuxt a toujours été son rendu côté serveur (également connu sous le nom de SSR). En revanche, Vue 3 nécessite une configuration et une configuration supplémentaires pour SSR.

Pour résumer ce qu’est SSR, cela signifie simplement que le serveur restituera entièrement la page HTML avant de l’envoyer au client. Cela améliorera le référencement, les performances de chargement initial (par rapport au rendu côté client) et l’expérience utilisateur globale. J’ai consacré une section entière aux raisons pour lesquelles Nuxt est un meilleur choix pour le référencement que l’utilisation de Vue, mais comme vous pouvez le deviner, SSR est l’une des principales raisons pour lesquelles les gens ont été attirés par Nuxt. En permettant aux pages Web de s’afficher plus rapidement, nous les indexons plus efficacement par les moteurs de recherche.

Aussi, au fil des années, Nuxt a évolué, et quatre modes de rendu supplémentaires sont désormais disponibles :

• Génération de sites statiques (SSG): Cela signifie que la page est pré-rendue au moment de la construction, ce qui donne lieu à des fichiers HTML statiques qui améliorent les performances et la sécurité. Vous disposerez de nombreux fichiers HTML prêts à être servis à vos utilisateurs que vous pourrez facilement déployer sur un CDN comme Netlify ou Vercel.
• Rendu côté client (CSR): Comme une application Vue classique, la page est entièrement rendue dans le navigateur. Cela peut bénéficier aux applications hautement interactives, mais entraîne des temps de chargement initiaux plus lents.
• Rendu hybride: Il combine SSR, SSG et CSR, permettant à différentes pages ou itinéraires d’utiliser différents modes de rendu selon les besoins. C’est une fonctionnalité intéressante qui vous permet de choisir le meilleur mode de rendu pour chaque page de votre application.
• Et le dernier… Edge-Side Rendering (ESR): Je ne l’ai jamais utilisé, mais il décharge le processus de rendu de votre page sur les serveurs Edge du CDN. Comme expliqué dans la documentation : Lorsqu’une demande de page est effectuée, au lieu d’aller jusqu’au serveur d’origine, elle est interceptée par le serveur Edge le plus proche. Ce serveur génère le code HTML de la page et le renvoie à l’utilisateur. Ce processus minimise la distance physique que les données doivent parcourir, réduisant ainsi la latence et chargeant la page plus rapidement.

Si vous souhaitez en savoir plus sur les différents modes de rendu, je vous recommande de lire le Documentation Nuxt. 👩‍🏫

Fonctionnalité n°5 : Nuxt facilitera votre vie en matière de référencement

Nous avons parlé de SSR, mais Nuxt 3 est également livré avec des composables intégrés qui améliorent considérablement vos capacités de référencement : useSeoMeta. Vous pouvez facilement définir vos balises méta dans votre <head> section, titres et autres informations liées au référencement avec ce composable. Comme Nuxt importe automatiquement tous vos composables, vous pouvez les utiliser globalement n’importe où dans vos pages.

useSeoMeta({
  description: 'My awesome description',
  title: 'Welcome to my website',
  titleTemplate: 'Project | %pageTitle',
})

Il existe plus de 100 paramètres que vous pouvez utiliser. Vous pouvez voir la liste complète ici. 👩‍🏫

De plus, il existe un package fantastique appelé Référencement Nuxt dont vous aurez besoin. Il s’agit d’un ensemble de différents modules que vous pouvez ajouter à votre application pour gérer facilement votre plan de site (@nuxtjs/sitemap), votre robots.txt (nuxt-simple-robots), votre organisation de schéma ou même pour générer des images OG dynamiques.

Note: Si vous utilisez Nuxt DevTools, jetez un œil à la section SEO pour voir toutes vos balises méta manquantes. C’est un excellent moyen de vérifier rapidement si tout est correctement configuré. 💁‍♀️

Fonctionnalité n°6 : Nuxt vous permet d’écrire votre propre API

Nuxt 3 est un framework full-stack. Cela signifie que vous pouvez écrire votre propre API directement dans Nuxt. Il n’est pas nécessaire d’ajouter un autre framework à votre pile comme Adonis ou NestJS. Votre logique backend, telle que la création ou la gestion de comptes d’utilisateurs, peut être gérée directement dans Nuxt. 🏋️‍♀️

Pour des informations détaillées, consultez le Documentation de l’API Nuxt. Prenez un moment pour le lire car c’est vraiment cool ! 🤩

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

Il s’agit d’un avantage significatif par rapport à Vue 3, qui se concentre principalement sur le frontend et nécessite une configuration backend supplémentaire pour obtenir des fonctionnalités similaires.

Note: En utilisant @sentry/vuevous pouvez détecter les erreurs dans vos routes API, surveiller ce qui ne va pas et améliorer continuellement les performances et la fiabilité de votre application.

Fonctionnalité n°7 : la récupération de données avec Nuxt est plus facile

Nuxt 3 simplifie la récupération de données avec des composables comme useAsyncData et useFetch. Ces composables sont conçus pour fonctionner de manière transparente avec SSR, ce qui facilite la gestion de la récupération de données asynchrone sans les tracas d’un code passe-partout supplémentaire. Ils fournissent également des options supplémentaires pour gérer les états de chargement, les erreurs et la mise en cache, améliorant ainsi l’expérience utilisateur globale.

<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch('/api/user', {
  pick: ['username', 'email', 'avatar']
})






</script>

En revanche, Vue 3 nécessite de gérer manuellement la récupération des données avec une bibliothèque comme Axios.

Fonctionnalité n°8 : Nuxt dispose d’un module I18N pour créer des applications multilingues

Si vous savez que votre candidature sera en plusieurs langues, je ne peux pas vous le recommander Nuxt I18N assez pour commencer depuis le début. Ce module facilite la création d’applications multilingues, vous permettant d’économiser beaucoup de temps et d’efforts à l’avenir. 👩‍💻

Il vous permet même d’utiliser traduction par composant (quelque chose que j’utilise intensivement, car GitHub Copilot peut facilement traduire pour d’autres langues).

<script setup lang="ts">
const { t } = useI18n({
  useScope: 'local'
})
</script>

<template>
  <p>{{ t('hello') }}</p>
</template>

<i18n lang="json">
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}
</i18n>

Les composables utiles dont vous aurez besoin à tout moment sont : useLocalePath, useI18n et useSwitchLocalePath. 👩‍🏫

Fonctionnalité n°9 : Nuxt propose Nuxt Content, un module pour gérer le contenu

Si vous avez beaucoup de contenu à écrire et que vous souhaitez utiliser Markdown, utilisez Contenu Nuxt. Il sera automatiquement converti en HTML, ce qui le rendra idéal pour les blogs, la documentation et le contenu statique.

Vous aurez accès à des composables comme queryContent pour interroger votre contenu, et vous pouvez même utiliser votre propre composant Vue dans vos fichiers Markdown.

::alert{type="warning"}
The **alert** component.
::

J’utilise toujours Nuxt Content pour les articles, les politiques de confidentialité et d’autres besoins en matière de contenu. Pensez également à utiliser Studio Nuxtun CMS pour Nuxt Content, même si cela a un coût.

Fonctionnalité n°10 : Nuxt est livré avec de nombreux modules

Je ne pouvais pas terminer cet article sans évoquer un gros avantage de Nuxt : son riche écosystème de modules. Il existe un module pour presque tout ce dont vous avez besoin, de l’authentification à la PWA, en passant par l’analyse et bien plus encore. Et le meilleur, c’est qu’il est facile d’ajouter des fonctionnalités puissantes à votre application avec une configuration minimale. 💆‍♀️

Par exemple, il est facile de créer un mode sombre avec le @nuxtjs/color-mode module ou optimisez toutes vos images avec le @nuxt/image module.

Alors ne réinventez pas la roue et jetez un œil aux modules disponibles. Vous serez surpris du temps que vous pourrez gagner en les utilisant. 🕰

Conclusion

J’espère pouvoir vous convaincre de jeter un œil à Nuxt. La prochaine fois que vous démarrerez un nouveau projet, envisagez d’utiliser Nuxt au lieu de Vue si cela vous semble plus logique. Je suis sûr que cela vous facilitera la vie et améliorera vos candidatures. 🚀

Vous pouvez me joindre sur Twitter @RifkiNada. Et si vous êtes curieux de connaître mon travail ou d’autres articles, vous pouvez les consulter ici www.nadarifki.com. 😉

Merci d’avoir lu! 🙏