Top 10 must use Nuxt modules

After a while working with Nuxt, here are the top 10 Modules that I use in every single one of my projects.

• Nuxt Devtools
  • Even that is enabled by default, this is one of the best Dev tools in the market, 100%.
  • If you’re not using nuxt you can use it for your plain Vue.js application as well.

• Nuxt Tailwind

  1. Using Tailwind CSS in your Nuxt project is only one command away.
  2. Visualize your Tailwind configuration with the viewer.

• Nuxt Content

  1. Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv or .JSON files and creates a powerful data layer for your application. Bonus, use Vue components in Markdown with the MDC syntax.
  2. This module pair with the new Nuxt Studio Chef kiss

Meet Studio

The Git-based CMS for Nuxt
Nuxt Studio is a new editing experience for your Nuxt Content website, offering infinite customization and user-friendly edition. Edit your website with our Notion-like editor and unleash the collaboration between developers and copywriters.

• Notion like editor
• Live collaboration
• Sync with GitHub
• Google authentication
• Custom components
• Preview links
• Continuous deployment
• Draft & review Try Nuxt Studio for free!

• Nuxt SEO Module

  1. This is one of those modules that you need to install if you are planing to have some kind of public or even think about SEO.
  2. This module has the most important submodules that you will ever need for your SEO needs.
  3. # Nuxt Robots
  4. Nuxt Robots manages the robots crawling your site with minimal config and best practice defaults.
  5. Robots.txt Config
  6. X-Robots-Tag Header, Meta Tag
  7. Production only indexing
  8. Easy and powerful configuration
  9. I18n Support
  10. # Site Config
  11. A single source of truth for site config, for end-users and module authors. Site config can be considered config that is commonly used amongst modules but is not supported by the Nuxt core.
  12. A set of APIs for working with "writable runtime config", for end-users and module authors.
  13. Robots Tame the robots crawling and indexing your site with ease.
  14. Sitemap Powerfully flexible XML Sitemaps that integrate seamlessly.
  15. OG Image Generate OG Images with Vue templates in Nuxt.
  16. Schema.org The quickest and easiest way to build Schema.org graphs.
  17. Link Checker
  18. Experiments Powerful SEO DX improvements that may or may not land in the Nuxt core.

• i18n
  i18n features for your Nuxt project, so you can easily add internationalization.
  

• Fontaine

  1. Automatically optimized font fallback based on font metrics

• unlighthouse Unlighthouse is a tool to scan your entire site with Google Lighthouse in 2 minutes (on average). Open source, fully configurable with minimal setup.

• nuxt-icon
  1. Icon module for Nuxt with 200,000+ ready to use icons from Iconify.

-. @vueuse/nuxt
1. Collection of essential Vue Composition Utilities for Vue 2 and 3

• UI Thing
  1. Re-usable components built using Radix-Vue & Tailwind CSS. All inspired by shadcn/ui.
  2. Is not a nuxt Module but is almost like it is :D.

**Happy hacking!

Working on the audio version

The Loop VueJs Podcast

Podcast Episode