20 modules Nuxt que vous pouvez utiliser pour créer plus rapidement des applications Web

La communauté Nuxt a mis au point de nombreux modules pratiques pour les fonctionnalités communes que nous devons toujours implémenter dans une application Web. Voici donc 20 de mes modules Nuxt préférés que vous devriez connaître si vous souhaitez augmenter votre productivité.

J'ai toujours adoré ma productivité accrue lorsque j'ai commencé à utiliser les modules Nuxt dans mes applications Vue. ? Etre capable de les installer avec npm comme tout autre paquet et de les configurer en un seul endroit (notre fichier nuxt.config.js ) a toujours semblé être un jeu d'enfant.

Mais ce qui est encore plus fantastique, c'est qu'avec le temps, la communauté a mis au point de nombreux modules pratiques pour les fonctionnalités communes que nous devons toujours implémenter dans une application Web.

Attention cependant: Ne confondez pas les modules Nuxt avec les plugins Nuxt. Je vous recommande de lire ce fil sur Github ou que vous dirigiez-vous vers la documentation officielle si les différences entre les deux n'étaient pas claires.

Mais en un mot: ?? ‍?

• Nous utilisons un plugin lorsque nous devons exécuter quelque chose dans notre application côté client ou côté serveur (c'est-à-dire lorsque le serveur effectue une SSR). La plupart du temps, il s'agit d'importer et de configurer un plugin ou une bibliothèque Vue donné.

• Au contraire, nous utilisons un module lorsque nous devons exécuter quelque chose lorsque notre application est en cours de démarrage . Un module n'est rien de plus qu'une suite de fonctions qui seront appelées séquentiellement sur le serveur nuxt ou nuxt gener . En d'autres termes, le framework attendra la fin de chaque module avant de continuer. C’est pourquoi nous pouvons les utiliser pour étendre notre application Nuxt en enregistrant des variables d’environnement spéciales (ce que fait le paquet Dotenv ci-dessous) ou en rendant toutes nos variables et mixins SASS disponibles dans tous nos fichiers, de sorte que nous n’ayons pas à les importer. chacun (ce que fait le paquet Nuxt Style Resources indiqué ci-dessous).

? Maintenant, sans plus tarder, voici 20 de mes modules Nuxt préférés que vous devriez connaître si vous voulez augmenter votre productivité.

1. Nuxt Dotenv

• Repository : Link .
• Installation : npm install @ nuxtjs / dotenv .

Ce module concerne le chargement de votre .env fichier (que vous devez ajouter à votre .gitignore ) directement dans le contexte de votre application nuxt.js et dans le fichier process.env. De cette façon, vous pourrez y accéder comme suit: process.env.API_URL .

Ceci est très utile si vous souhaitez définir des variables globales une seule fois (par exemple, API_URL. APP_VERSION etc.) ou que vous ne voulez pas pousser à la production (par exemple, MIXPANEL_TOKEN STRIPE_KEY etc.),

. Vous pouvez également choisir le fichier .env à utiliser en fonction de votre environnement (développement, agencement, production, etc.). Voici comment je procède:

 let  envFileName ; 


 if   ( processus .  env .  NODE_ENV  = ==   "production" )   {
  envFileName  =   ". production.env" ; 
}   else   {
  envFileName  =   ". env.local" ; 
} 

module .  exports  =   {
  modules :   [
     [
       "@ nuxtjs / dotenv" 
       {
        chemin :   ". env" 
        nom de fichier :  envFileName
      } 
    ] 
  ] 
} ; 

2. Ressources de style Nuxt

• Repository : Lien .
• Installation : npm install @ nuxtjs / style-resources .

Lors de l'utilisation de SASS, LESS ou Stylus, vous avez peut-être remarqué que vous devez importer vos variables et mixins dans chacun de vos fichiers Vue avant de les utiliser. Ce processus peut rapidement devenir ennuyeux et fastidieux.

Ce paquet a pour objectif de résoudre ce problème. Définissez simplement les fichiers qui incluent vos variables et mixins dans styleResources et le module se chargera de les importer dans tous vos fichiers Vue. Et voilà! ??‍♀️ Plus besoin de déclarations supplémentaires concernant l'importation

 module .  exports  =   {
  modules :   [ "@ nuxtjs / style-resources" ] 

  styleResources :   {
    scss :   [
      
       "@ / assets / settings / _settings.colors.scss" 

      
       "@ / assets / tools / _tools.backgrounds.scss" [19659032] "@ / assets / tools / _tools.mq.scss" 
    ] 
  } 
} ; 

Note personnelle: Beaucoup de gens m'ont demandé si ce module pourrait ralentir le temps de construction lors du développement de l'application. Je l’utilise depuis plus d’un an et demi et, jusqu’à présent, je n’ai jamais constaté de baisse de performance. Donc, je peux affirmer en toute confiance que tout va très vite. ?

• Repository : Link .
• Installation : npm installez nuxt-social-meta .

Ajout des balises META pour les réseaux sociaux tels que Twitter et Facebook constituent une bonne pratique courante dans les applications Web modernes. Voulez-vous le faire en moins de 10 secondes et passer à la tâche suivante? Module facile

 .  exports  =   {
  modules :   [
     [
       "nuxt-social-meta" 
       {
        title :   "Mon produit | Avec d'excellentes caractéristiques" 
        description : 
           "Une description incroyable qui vous propulsera dans les moteurs de recherche." 
        url :   "https://www.example.com" 
        img :   "/ link_to_image_in_static_folder.jpg" 
        locale :   "en-US" 
        twitter :   "@ twitterHandle" 
        themeColor :   "# 1B2432" 
      } 
    ] 
  ] 
} ; 

4. Nuxt Vuex Router Sync

• Dépôt : Lien .
• Installation : npm installer nuxt-vuex-routeur-sync .

. Impossible de trouver un moyen propre d'accéder à l'objet $ route dans l'un de mes magasins Vuex, j'ai utilisé ce module pour activer vuex-router-sync en une seule ligne. Le fait est que dans une application Vue classique, vous pouvez généralement accéder à cet objet en important simplement le fichier de votre routeur dans votre magasin (avec quelque chose comme importateur de routeur de @ / router / index / .js ). Mais comme il n'y a pas de fichier de routeur dans Nuxt (rappelez-vous, tous les itinéraires sont générés dynamiquement en fonction de l'architecture de votre dossier pages ), ce paquet est comme un cadeau envoyé par les dieux du code. ⛩

 module .  exports  =   {
  modules :   [ "nuxt-vuex-router-sync" ] 
} ; 

5. Nuxt MQ

• Repository : Link .
• Installation : npm install nuxt-mq .

Avez-vous besoin de savoir quels points d'arrêt sont actifs quand vous êtes dans votre code JavaScript? Ce paquet vous permettra de le faire en un clin d'œil. ?

 module .  exports  =   {
  modules :   [ [ "nuxt-mq" ] ] 

  mq :   {
    defaultBreakpoint :   "bureau" 
    points d'arrêt :   {
      mobile :   768 
      tablette :   1024 
      Bureau :   1400 
      desktopWide :   2000 
      desktopUltraWide :   Infinity 
    } 
  } 
} ; 

Vous pouvez facilement modifier la taille du bouton de «défaut» à «petit» pour les utilisateurs de téléphone portable ceci:

 < base-button  : size  =  " $ mq ===  ' mobile ' ? [ ' small ' :  ' default  " >  L'étiquette de mon bouton  </  base- button >  

Note personnelle n ° 1: Il utilise Nuxt-MQ derrière le rideau. Soyez prudent!

Note personnelle n ° 2: N’oubliez pas que les requêtes des médias existent. Ce module ne vise pas à les remplacer, mais à fournir une meilleure solution dans certaines situations lorsque vous devez par exemple mettre à jour de manière dynamique un accessoire donné.

6. Nuxt Axios

• Documentation : Link .
• Dépôt : Link .
• Installation : npm installer @ nuxtjs / axios .

La plupart des applications effectuent des appels HTTP pour extraire les données d'une API. Avec ce module, vous pourrez configurer axios en quelques secondes et accéder à ce. $ Axios n’importe où dans votre application. Voici quelques fonctionnalités pratiques que j'apprécie beaucoup:

• Définition automatique de l'URL de base pour le client et le côté serveur (voir ci-dessous).
• Les aides pratiques comme this. $ Axios. $ Get this. $ axios. $ post cela. $ axios. $ put et this. $ axios. $ delete pour renvoyer directement les données de la charge utile.
• Expose setToken fonctionne sur avec ce module. Axios afin que nous puissions définir facilement et globalement des jetons d'authentification (une fois qu'un utilisateur s'est connecté, par exemple).

 module .  exportations  =   {
  modules :   [ "@ nuxtjs / axios" ] 

  axios :   {
    baseURL :   `https: // api.example.com /`  
    proxyHeaders :   false 
    pouvoirs :   false 
  } 
} ; 

7. PWA de Nuxt

• Documentation : Lien .
• Dépôt : Lien .
• Installation : npm installer @ nuxtjs / pwa .

Il s'agit du module officiel Nuxt permettant de créer des applications Web progressives. Il est livré avec plusieurs fonctionnalités que vous pouvez utiliser en fonction de vos besoins (toutes sont optionnelles). Mes préférés sont probablement la possibilité de générer automatiquement le fichier manifest.json ainsi que toutes les icônes d'application d'un seul fichier icon.png . Cela vous fera gagner du temps, car vous n'aurez plus besoin de faire appel à Sketch ou à Photoshop. Vous pouvez également inscrire un agent de service pour la mise en cache hors ligne et implémenter des notifications push avec OneSignal.

 module .  exports  =   {
  modules :   [ "@ nuxtjs / pwa" ] 

  axios :   {
    baseURL :   `https: // api.example.com /`  
    proxyHeaders :   false 
    pouvoirs :   false 
  } 
} ; 

8. Nuxt Sentry

• Repository : Link .
• Installation : npm install @ nuxtjs / sentry .

Sentry est indispensable pour tous développeur qui souhaite réparer et créer des applications Web fiables. Il enregistre et vous informe de toutes les exceptions déclenchées dans votre environnement de production. Heureusement, avec ce module, vous pouvez le configurer en moins d’une minute. Créez un compte sur Sentry et ajoutez votre DSN.

 module .  exports  =   {
  modules :   [ "@ nuxtjs / sentry" ] 

  sentinelle :   {
    dsn :   "https: //4b175105498572343508bc3ac8923e72@sentry.io/3847292" 
    config :   {}  
  } 
} ; 

9. Nuxt Auth

• Documentation : Link .
• Repository : Link .
• Installation : npm installer @ nuxtjs / auth @ nuxtjs / axios .

Autre module officiel populaire, celui-ci est là pour vous aider à utiliser votre système d'authentification en une minute. Il est livré avec un middleware préconfiguré pour permettre certaines routes aux utilisateurs authentifiés, un service $ auth et différents fournisseurs de services sociaux tels que Facebook, Google ou Github. Vous aurez également besoin du paquet axios pour le faire fonctionner.

 module .  exports  =   {
  modules :   [ "@ nuxtjs / axios"   "@ nuxtjs / auth" ] 

  auth :   {
    
  } 
} ; 

Note personnelle: Les utilisateurs authentifiés seront enregistrés dans un magasin Vuex. Assurez-vous de bien comprendre comment Vuex fonctionne avant. aller plus loin.

10. Nuxt Sitemap

• Repository : Lien .
• Installation : npm install @ nuxtjs / sitemap .

Sur la base de sitemap.js il générera et servira automatiquement le fichier sitemap.xml dynamique basé sur votre architecture de dossier pages . Cela fonctionne avec tous les modes (universel, spa, générer). Voici comment l'installer et le configurer. Il ignorera bien sûr tous les itinéraires dynamiques, mais vous pouvez exécuter une fonction pour les générer vous-même ( plus à ce sujet ici ?).

 module .  exportations  =   {
  modules :   [ "@ nuxtjs / sitemap" ] 

  plan du site :   {
    nomhôte :   "https://example.com" 
    gzip :   true 
    exclure :   [ "/ secret"   "/ admin / **" ] 
  } 
} ; 

Personnelle Remarque: Si vous devez également générer un flux RSS, reportez-vous à le module d'alimentation .

11. Nuxt Local Tunnel

• Repository : Lien .
• Installation : npm install @ nuxtjs / localtunnel .

Avez-vous besoin de montrer votre travail à quelqu'un sans le télécharger sur un serveur de production? Avez-vous besoin de recevoir un Webhook à partir d'une application tierce? Ce module vous permettra de créer un tunnel local et d’exposer votre hôte local à Internet.

 module .  exports  =   {
  modules :   [
    
     "@ nuxtjs / localtunnel" 

    
     [ "@ nuxtjs / localtunnel"   { sous-domaine  :   "foobar"  } ] 
  ] 
} ; 

12. Nuxt Toast

• Repository : Lien .
• Installation : npm installer @ nuxtjs / toast .

Toutes les applications doivent envoyer en in-app notifications à leurs utilisateurs lorsque certains événements se produisent. D'après vue-toasted vous aurez accès à ce. $ Toast partout dans votre application et envoyez des messages d'erreur ou des messages réussis à vos visiteurs avec $ toast.show () $ toast.success () et $ toast.error () .

 module .  exportations  =   {1945} 
  modules :   [ "@ nuxtjs / toast" ] 

  pain grillé :   {
    position :   "centre supérieur" 
    registre :   [
      
       {
        nom :   "mon-erreur" 
        message :   "Oups ... quelque chose s'est mal passé" 
        options :   {
          type :   "erreur" 
        } 
      } 
    ] 
  } 
} ; 

13. Nuxt ImageMin

• Repository : Link .
• Installation : npm installez la bibliothèque d'images et de scripts de Nuxt-imagemin .

réduisez de manière transparente toutes vos images PNG, JPEG, GIF et SVG pour accélérer le chargement de vos applications Web. Configurez le niveau d'optimisation pour chacun.

 module .  exports  =   {
  modules :   [
     [
       "nuxt-imagemin" 
       {
        optipng :   { optimisationNiveau :   5  } 
        gifsicle :   { optimisationNiveau :   2  } 
      } 
     
  ] ; 
} 
; 19659063] Note personnelle n ° 1:  Si vous utilisez des images  webp vous pouvez configurer un plugin personnalisé  imagemin-webp  avec ce module. 
  Note personnelle N ° 2:  Vous pouvez également utiliser le module  nuxt-optimisé-images  qui comporte des fonctionnalités supplémentaires, telles que la possibilité de redimensionner les images. 
 14. Nuxt Webfontloader 
 Repository :  Lien . 
    
 Installation :  npm installer nuxt-webfontloader . 
 Ce module vous aidera à installer des polices Web spécifiques. depuis Google Fonts, Typekit, Fonts.com et Fontdeck et chargez-les de manière asynchrone pour augmenter les performances de votre application Web. Il est construit sur le  Webfontloader de Google / Typekit  et est fourni avec le support complet des SVG en tant que composants. 


 module .  module  =   {.
  modules :   [ "nuxt-webfontloader" ] 

  chargeur de site Web :   {
    google :   {
      familles :   [ "Lato: 400,700" ]  
    } 
  } 

  

  tête :   {
    lien :   [
       {
        rel :   "stylesheet" 
        href :   "https://fonts.googleapis.com/css?family=Lato:400,700" 
      } 
    ] 
  } 
} ; 
 15 Nuxt Google Analytics
 Repository :  Lien .
 Installation :  npm installer @ nuxtjs / google-analytics .
 Besoin d'installation de Google Analytics Pour la énième fois? Faites-le en dix secondes avec ce module et passez à la tâche suivante.


 module .  exports  =   {
  modules :   [ "@ nuxtjs / google-analytics" ] 

  googleAnalytics :   {
    id :   "UA-12301-2" 
  } 
} ; 
 16. Nuxt Dropzone
 Documentation :  Link .
 Dépôt :  Link .
 Installation :  npm installer nuxt-dropzone .
 Si vous avez besoin d'un composant Dropzone compatible avec le rendu côté serveur, ce module devrait être la réponse que vous recherchez. Il est alimenté en interne par  vue-dropzone  et peut être utilisé aussi simplement:
 // OneOfYourVueFile.vue

  
 17. Nuxt PurgeCSS
 Repository :  Link .
 Installation :  npm installez nuxt-purgecss .
 Pour améliorer les performances de votre application, vous voudrez peut-être supprimer les CSS non utilisées. Ce module, construit sur le  purgecss est livré avec d’importants paramètres par défaut et un mode Webpack ou PostCSS. Il peut être installé et configuré comme n'importe quel autre module et fonctionne à merveille:


 module .  exports  =   {
  modules :   [ "nuxt-purgecss" ] 

  purgeCSS :   {
    
  } 
} ; 
 18. Nuxt Router Module
 Repository :  Link .
 Installation :  npm install @ nuxtjs / router .
 Fatigué d'utiliser le  pages  pour définir vos itinéraires? Vous pouvez toujours utiliser votre propre fichier  router.js  avec ce module comme sur toute autre application Vue.


 module .  exports  =   {
  modules :   [ "@ nuxtjs / router" ] 

  routerModule :   {
    chemin :   "srcDir" 
    nomfichier :   "routeur.js" 
    keepDefaultRouter :   false 
  } 
} ; 
 19. Mode de maintenance Nuxt
 Dépôt :  Lien .
 Installation :  npm install nuxt-maintenance-mode .
 Ce module est destiné à l'affichage. une vue de maintenance comme solution de secours tout en maintenant l'application. Il renverra également un code d’état 503 au client. Comme le dit l'auteur:
 Il s'agit du moyen le plus simple et le plus efficace de mettre une application en maintenance sans compromettre le référencement et l'expérience d'accès de l'utilisateur.


 module .  exports  = [19659017] {
  modules :   [ "Mode maintenance" ] 

  entretien :   {
    enabled :  ! !  processus .  env .  MAINTENANCE_MODE 
    chemin :   "/ maintenance" 
    matcher :   /  ^    /  admin  /  
  } 
} ; 
 20. Nuxt Robots.txt
 Repository :  Link .
 Installation :  npm install @ nuxtjs / robots .
 Ce module injecte un middleware pour la génération un fichier  robots.txt . Il peut être configuré en quelques secondes comme ceci.


 module .  exports  =   {
  modules :   [ "@ nuxtjs / robots" ] 

  robots :   {
    UserAgent :   "*" 
    Disallow :   "/" 
  } 
} ; 
 Ai-je oublié l'un de vos favoris? Avez-vous créé un module qui, selon vous, devrait être répertorié ici? N'hésitez pas à me le signaler dans les commentaires ci-dessous ou à me contacter sur Twitter  @RifkiNada .