8 skvělých Nuxt.js modulů, které zefektivní váš vývoj

Jedna z mnoha výhod Nuxt.js jsou moduly, které si můžete jednoduše přes yarn nebo npm přidat do svého webového projektu a začít používat. Tyto moduly pak zrychlí proces celého vývoje a ušetří vám práci se psaním vlastního kódu. Proto jsem si pro vás připravil svých 8 nejoblíbenějších modulů, které pravidelně používám ve svých projektech.

Nuxt-mq

Nuxt-mq je velmi návykový modul, bez kterého si vývoj už nebudete umět představit. Jednoduše si nadefinujete do vašeho nuxt.config.js breakpointy, které můžete využívat při vývoji. S direktivou v-show/v-if se jedná o skvělý způsob, jak zobrazovat rozdílný obsah při různé šířce viewportu.

Nuxt Optimized Images

Tento modul za vás udělá těžkou práci při optimalizaci vašich obrázků. Nuxt Optimized Images spojuje dohromady několik optimalizačních balíčků (nemusíte využívat všechny, záleží na vašem projektu a na tom, co zrovna optimalizovat chcete/potřebujete). Balíčky stačí stáhnout do svého projektu. Modul pak použité balíčky rozpozná a začne je používat. Pokud tedy potřebujete převést své obrázky do formátu .webp, stačí nainstalovat potřebný balíček a postupovat podle instrukcí. Nuxt Optimized Images má přehlednou dokumentaci, kde se dozvíte vše potřebné.

Nuxt Webfontloader

Další modul, který pomůže s rychlostí vašeho webu, se tentokrát zaměřuje na webové fonty z Google Fonts, Typekitu nebo Fonts.com. Tyto fonty načítá po instalaci modulu vaše webová aplikace asynchronně, čímž vylepšuje výkon.

Nuxtjs/gtm

Pokud jste si někdy lámali hlavu s tím, jak do vašeho Nuxt.js projektu nasaditGoogle Tag Manager, můžete si v klidu udělat kafe a nainstalovat @nuxtjs/gtm modul. Všechno potřebné pak nastavíte přímo ve vašem nuxt.config.js a můžete začít GTM používat.

Nuxtjs/style-resources

Tento modul jsem objevil teprve nedávno. Mohu ho doporučit úplně všem, kteří ve svých projektech často používají proměnné v LESSu nebo SASSu. Všechny potřebné soubory s proměnnými si jednoduše nastavíte přímo v nuxt.config.js a můžete je používat na všech stránkách i komponentách bez nutnosti implementace přímo v nich.

Nuxt PurgeCSS

Tento modul se opět týká rychlosti webu. Pokud máte ve vašich projektech problém s nevyužitým css, je pro vás PurgeCSS řešením. S modulem se dobře pracuje a můžete mu v nuxt.config.js přidávat dodatečná nastavení. Stránku si po aplikaci PurgeCSS ale dobře zkontrolujte, občas je potřeba nastavit výjimky, kterými se nemá modul zaobírat, aby vše fungovalo, jak má.

Sitemap Module

Jak už název napovídá, Sitemap Module za vás vytvoří na vašem webu funkční sitemap napříč všemi url adresami. Pro 100% funkčnost je potřeba si trochu pohrát s nastavením a naservírovat modulu dynamické url adresy, stále se však jedná o efektivní boost při vašem vývoji.

Nuxt Image Loader

Další výborný modul pro optimalizaci obrázků. Pokud servírujete obrázky v několika velikostech, často se může stát, že jich na serveru máte zbytečně moc. Nuxt Image Loader udělá špinavou práci za vás a vytvoří díky povedenému systému maker různé verze obrázků, které bude servírovat podle vašich požadavků.