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.
-
- Using Tailwind CSS in your Nuxt project is only one command away.
- Visualize your Tailwind configuration with the viewer.
-
- 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.
- 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!
-
- 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.
- This module has the most important submodules that you will ever need for your SEO needs.
- # Nuxt Robots
- Nuxt Robots manages the robots crawling your site with minimal config and best practice defaults.
- Robots.txt Config
- X-Robots-Tag Header, Meta Tag
- Production only indexing
- Easy and powerful configuration
- I18n Support
- # Site Config
- 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.
- A set of APIs for working with "writable runtime config", for end-users and module authors.
- Robots Tame the robots crawling and indexing your site with ease.
- Sitemap Powerfully flexible XML Sitemaps that integrate seamlessly.
- OG Image Generate OG Images with Vue templates in Nuxt.
- Schema.org The quickest and easiest way to build Schema.org graphs.
- Link Checker
- 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.
-
- 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
- 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
- Re-usable components built using Radix-Vue & Tailwind CSS. All inspired by shadcn/ui.
- Is not a nuxt Module but is almost like it is :D.
**Happy hacking!
Working on the audio version
Top comments (5)
I would add Nuxt UI - apart from versatile UI items library it also contains Tailwind and nuxt-icon inside.
And this is how you start a new project from starter template with Nuxt UI included with just one console command:
npx nuxi@latest init -t ui <project_name>Yeah, that is for sure, Nuxt UI seems really nice, Probably personal preference I like to use the ui-thing.behonbaker.com because of a bad experience with bootstrap-vue.org and the migration nightmare to vue 3.
Let me know what are your top 5 or 10 most used Nuxt Modules.
This one seems to be most advanced and backed as of now - auth.sidebase.io/ - but I have no direct experience.
Surprisingly it looks like there is no matured and official solution yet.
I try it once like 1/2 a year ago, and it was a pain, but most of the errors where related to the underline package that they are using nextauth, but they update that I think.
Personally I like lucia-auth.com/getting-started/nuxt As a layer then just extend that layer on other projects.
Im waiting for the official nuxt auth module as well