Top 10 nuxt.js modules to use in your projects
Nuxt.js is framework for creating vue.js apps that can be developed in server side rendering ssr mode or single page application spa. Nuxt is built on top of vue.js, supercharged with some extra features such as plugins, modules, layouts and middlewares that run your application on the server side then client side. And this makes your application renders faster than other server side apps.
What is nuxt modules?
Nuxt.js modules are simply top-level JavaScript functions that run when Nuxt application starts. Nuxt calls each module in turn, and waits for all modules to be executed before calling vue instances, plugins and global functions.
we can use modules to override templates, configure webpack and vite loaders, add css libraries, and do whatever else you need for your application.
let's discover top nuxt modules that you can use to supercharge your applications.
1. Nuxt Tailwind
This module help you setup tailwindcss in your nuxt apps with zero configuration, css nesting and tailwindcss viewer page.
Installation
# yarnyarn add -D @nuxtjs/tailwindcss# npmnpm install --save-dev @nuxtjs/tailwindcssadd @nuxtjs/tailwindcss to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxtjs/tailwindcss' ]})You can see more configuration at Nuxt Tailwindcss documentation website.
2. Nuxt Content
Nuxt Content is file based cms for nuxt apps and come with many features such as mdc syntax that let you use vue components in markdown, query builder to query content in any part of your application and code highlighting.
Installation
# yarnyarn add -D @nuxt/content# npmnpm install --save-dev @nuxt/contentadd @nuxt/content to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/content', ]})You can learn more on Nuxt Content documentation website.
3. Nuxt Image
Nuxt Image is module for optimizing and generating responsive images in nuxt apps, It's optimize using modern formats and support many image providers.
3.1 Installation
# yarnyarn add -D @nuxt/image-edge# npmnpm install --save-dev @nuxt/image-edgeadd @nuxt/image-edge to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/image-edge', ]})3.2 Usage
Nuxt Image have two components: nuxt-img and nuxt-picture
<template> <nuxt-img src="/img.png" /> <nuxt-picture src="/picture.png"/></template>You can see more on Nuxt Image.
4. Nuxt Svgo
Nuxt Svgo is module for loading optimized svg files as vue components.
4.1 Installation
# yarnyarn add -D nuxt-svgo# npmnpm install --save-dev nuxt-svgoadd nuxt-svgo to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ 'nuxt-svgo', ]})4.2 Usage
<script setup>import Icon from '~/assets/icon.svg'</script><template> <div> <Icon class="" style="" /> </div></template>You can see more configuration on Nuxt Svgo.
5. Nuxt Color Mode
Nuxt Color Mode is module to switch between light and dark modes with auto detection for system color mode.
Installation
# yarnyarn add -D @nuxtjs/color-mode# npmnpm install --save-dev @nuxtjs/color-modeadd @nuxtjs/color-mode to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxtjs/color-mode', ]})You can reed more on Nuxt Color Mode.
6. Nuxt Auth
Nuxt Auth is module that provide authentication for Nuxt 3 apps and it support three types of auth:
- OAuth: Authentication with third party providers like google and github.
- Credentials: Authentication with username and password.
- Emails: Authentication via emails, like Slack or Notion.
Installation
# yarnyarn add -D @sidebase/nuxt-auth# npmnpm install --save-dev @sidebase/nuxt-authadd @sidebase/nuxt-auth to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@sidebase/nuxt-auth', ]})You can reed more on Nuxt Auth.
7. Nuxt Viewport
Nuxt Viewport is module that let you define custom viewports for your nuxt application with zero configuration.
7.1 Installation
# yarnyarn add -D nuxt-viewport# npmnpm install --save-dev nuxt-viewportadd nuxt-viewport to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ 'nuxt-viewport', ]})7.2 Usage
<script setup>import { useNuxtApp } from '#app'const { $viewport } = useNuxtApp()</script><template> <div> <div v-if="$viewport.isLessThan('tablet')">render only on mobile</div> <div v-else>Current breakpoint: {{ $viewport.breakpoint }}</div> </div></template>You can reed more on Nuxt Viewport.
8. Nuxt Icon
Nuxt Icon is module with over 100,000 open source vector icons from iconify to use in nuxt apps.
8.1 Installation
# yarnyarn add -D nuxt-icon# npmnpm install --save-dev nuxt-iconadd nuxt-icon to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ 'nuxt-icon', ]})8.2 Usage
You can use any icon from the icones.js collection by name:
<template> <Icon name="fa6-solid:0" /></template>You can reed more on Nuxt Icon.
9. Nuxt I18n
Internationalization (i18n) is the process of preparing software to support local language and cultural preferences.
Nuxt I18n is module for adding internationalization to nuxt projects with easily configuration.
Installation
# yarnyarn add -D @nuxtjs/i18n# npmnpm install --save-dev @nuxtjs/i18nadd @nuxtjs/i18n to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxtjs/i18n', ]})You can reed more on Nuxt I18n.
10. Nuxt Lodash
Nuxt Lodash is module that provide lodash library for nuxt projects with auto import and custom prefix.
Installation
# yarnyarn add -D nuxt-lodash# npmnpm install --save-dev nuxt-lodashadd nuxt-lodash to modules in next.config.ts.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ 'nuxt-lodash', ]})You can reed more on Nuxt lodash.
There are many other modules that you can use to improve and extend your Nuxt projects and you can find them on Nuxt official website or by search in npm packages.