---

Dans cet article, nous allons faire le tour de quelques modules NuxtJS que j'utilise ou que je découvre. La majorité des modules présentés ici ont un objectif en commun : optimiser au maximum votre projet.

À noter quand même que ces modules sont optionnels, et qu'il est possible de passer par d'autres solutions afin d'obtenir le même résultat. Les modules sont là pour nous économiser des centaines de lignes de codes et ont l'avantage d'être pilotés dans un seul et même fichier (nuxt.config.js), les rendant ainsi accessible globalement.

Nuxt Optimized Images

Nuxt Optimized Images est un module qui permet d'optimiser automatiquement vos images situées dans le dossier /assets

L'installation est extrêmement simple et les résultats sont très intéressants pour améliorer les performances de votre application web.

Pour installer le module :

yarn add --dev @aceforth/nuxt-optimized-images

Dans le fichier nuxt.config.js, rajoutez :

buildModules : [
      '@aceforth/nuxt-optimized-images',
],

optimizedImages : {
    optimizeImages : true
}

Il faut ensuite installer un Package, au choix, selon vos images. Si vous utilisez des images de type JPG, PNG, and SVG que vous souhaitez optimiser dans votre projet, il est recommandé d'installer les packages suivants :

yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

Vos images seront ensuite optimisées durant le build

Google Fonts Module

Google Fonts Module vous permet de charger vos Google Font de façon globale dans votre projet. Simple d'utilisation, ce module permet aussi d'optimiser le chargement des fonts via de nombreuses options.

Pour installer ce module :

yarn add --dev @nuxtjs/google-fonts

Dans votre nuxt.config.js :

buildModules : [
      '@nuxtjs/google-fonts',
],

 googleFonts : {
    families : {
         // Nom du font que vous souhaitez utiliser
        Poppins : true,
    },
    // Optionel, mais FORTEMENT conseillé pour des raisons de performance
    display : 'swap',
},

Encrypter vos 'mailto'

Je trouve souvent très gadget l'utilisation de formulaire de contact, et je ne les utilise jamais sur mes projets perso. Et si vous êtes comme moi, vous utilisez sûrement un simple mailto :<a href = "mailto:votreadresse@societe.com"> Envoyer un mail </a>

C'est simple, rapide et efficace. Cela ouvre la boîte mail par défaut de l'utilisateur et ça lui permet de vous envoyer un mail personnalisé, sans service intermédiaire.

Cependant, bien que cette méthode soit très avantageuse selon moi, elle a aussi un inconvénient majeur : celui d'exposer votre adresse e-mail au monde entier, à la merci des bots et autres spammeurs.

Pour contrer cela, je n'expose généralement qu'un alias de mon adresse principal. Mais nous pouvons aller plus loin avec un module NuxtJS permettant d'encoder votre adresse mail afin de ne pas l'exposer publiquement.

La première étape consiste à installer le module à la racine de votre projet :

yarn add nuxt-protected-mailto

Une fois installé, nous allons rajouter notre module dans nuxt.config.js

{
    modules : [
         'nuxt-protected-mailto',
    ]
}

Nous allons aussi ajouter les paramètres suivant

{
    build : {
        html : {
            minify : {
                decodeEntities : false
            }
        }
    }
}

Une fois notre nuxt.config modifié, notre module sera disponible dans notre projet. Pour l'utiliser, rien de plus simple :

<Mailto mail='votremail@example.com' subject="Optional Example Subject" body="Optional Placeholder Body" title="Write me a email"/>

N-grok

N-grok est un module de tunneling. Cela vous permet de déployer votre localhost au monde entier. Très pratique dans le cadre d'un projet en pair-programming ou si vous souhaitez présenter un projet à un client et faire des modifications en direct!

La première étape consiste à créer un compte sur Ngrok

Une fois votre compte créé, dans la partie '2. Connect your account' copiez votre clef secrète :

./ngrok authtoken VOTRE_CLEF_SECRET

Créez un fichier .env à la racine de votre projet, avec votre clef secrète. Il est aussi possible de limiter l'accès en créant un utilisateur / mot de passe pour avoir accès à votre projet :

NGROK_TOKEN = VOTRE_CLEF_SECRETE
NGROK_AUTH = 'test:12345678'

Installation :

yarn add @nuxtjs/ngrok

Ajout du module dans nuxt.config.js

buildModules : [
      '@nuxtjs/ngrok',
],

 ngrok : {
    authtoken : process.env.NGROK_TOKEN,
    // Optionnel, seulement si vous souhaitez limiter l'accès avec un utilisateur / mot de passe
    auth : process.env. NGROK_AUTH,
},

Utilisation :

Lancez simplement yarn dev, vous verrez alors apparaître l'URL public dans votre console

---