Nuxt - 5 Addons You Have to Use!

Understanding Nuxt Modules

Nuxt Modules is the way to add features and integrate 3rd party libraries or services into your Nuxt apps.

If you need to add TailwindCSS, Database or handle images the right way - you just install a module, easy - plug&play.

Here's a list of 5 must-have moudles for your next Nuxt app!

Must Have Nuxt Modules

Analyze & Debug Your Nuxt App

The DevTools Module is essential. It gives you all the info about your app, component tree, pages, routes - you name it.

A must have tool! That's why it's installed and enabled by default.

Pinia - Manage State, Track State Changes

The Pinia Module installs Pinia, a store library. Pinia helps you share state application wide - between components/pages, track state changes and more.

npm i @pinia/nuxt 

TailwindCSS Module - Style the Website

The TailwindCSS Module installs TailwindCSS - utility based CSS framework. The most popular CSS utility/framework/library these days. Most new UI frameworks are based on Tailwind, so knowing and using Tailwind will open a lot of doors for you.

Let's see how to integrate TailwindCSS with Nuxt:

npx nuxi@latest module add tailwindcss

Add the tailwindcss module to your nuxt.config.js or nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

i18n Module - Internationalization

The i18n Module - internationalization library for you Nuxt apps. Required if your app is to support more than one language.

npx nuxi@latest module add i18n 

Add the i18n module to your nuxt.config.js or nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
})

NuxtImage - Optimizing Images

The NuxtImage Module - automatic image optimization, resize & transform images. Really needed for any website with images (which is almost 99% of websites). A real must-have if your project is media heavy. It's one of the Nuxt modules for better app performance.

nuxi@latest module add image

Add the image module to your nuxt.config.js or nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})