5 Nuxt Modules to Use in Your Next Project

Intro

The Nuxt team and community has recently released an expansive Nuxt Module Explorer which allows you to filer Nuxt modules by popularity, type, and Github stars.

Until I saw this explorer, I had no idea how robust the Nuxt Module ecosystem had become. I was able to find some really useful modules that I've used on this project and others.

The list can be pretty daunting (in an awesome way), so I figured I would boil it down to five that have helped me immensely. By no means are these the only ones I'd recommend, just five that I think are great!

TL:DR: Just show me the modules!

1. Nuxt/Content

When building this site, I knew I needed to find a headless CMS to manage my content. I wanted to author my content in Markdown, interpolate Vue components, and be able to commit it to version control. Nuxt content has all of this, and more!

Some of the nicest features I've found are:

The ability to inject any variables into the article using a YAML front matter
The automatic injection createdAt, updatedAt, and toc (table of contents) variables to use
"Double click" to edit directly on the page, and see changes reflected immediately
Ability to interpolate Vue components directly into your markdown

There's much more to this module, but I can't recommend it enough!

2. Nuxt/Tailwind

If you are involved in Front-end web development, you've probably heard of TailwindCSS. If you aren't familiar, it's a "utility-first" CSS framework with endless amounts of customization and thoughtful defaults. If you're like me, you know that once you've tried it you can't go back.

This module makes it extremely easy to get Tailwind up and running with your Nuxt project, and allows you to reference the Tailwind config directly in your app. It also plays very nicely with Dark Mode and our next module in the list...

3. Nuxt/Color-Mode

This module makes it incredibly easy to detect the users preferred color scheme when they first visit, or toggle and save their choice for subsequent page visits. It also plays very nicely with Nuxt/Tailwind.

You can read $colorMode.preference directly in your templates or components, and render different content based on their current preference, and changing their color-mode preference is as easy as calling a toggle function like this:

<template>
  <button @click="toggleColorMode">Toggle Color Mode</button>
</template>

<script>
export default {
  methods: {
    toggleColorMode() {
      this.$colorMode.preference = this.$colorMode.value == "light" ? "dark" : "light";
    }
  }
}
</script>

4. Nuxt/Cloudinary

One of the easiest ways to improve your websites performance is through image optimizations. Nuxt/Cloudinary makes this trivial.

Cloundinary is a solution for managing image and video content (with a very generous free plan). The service provides the ability to optimize images on the fly with powerful transformations and even the ability to add text overlays to images.

Maya Shavin maintains this amazing Module that almost feels like magic. The module injects a Cloudinary Instance ($cloudinary) into your Nuxt project which you can use to do some really powerful stuff.

You can fetch images or videos stored in your Cloudinary instance and perform transformations

const url = this.$cloudinary.image.url('sample', { crop: 'scale', width: 200 })

You can even fetch remote images and perform the very same transformations

const url = this.$cloudinary.image
              .fetchRemote(
                'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
                { crop: 'scale', width: 200 })

The module also provides some ready-made Vue components that you can use anywhere in your templates. It's truly magic!

5. Nuxt/feed

This module helps you generate an RSS, Atom or JSON feed from your website's content!

You may be thinking, do people still use RSS feeds? Well Chris Coyier (founder of CSS Tricks & CodePen) does!

Who’s gonna read your personal blog because it has an RSS feed? I’m gonna read your personal blog because it has an RSS feed. pic.twitter.com/mtcyKhEVet
— Chris Coyier (@chriscoyier ) January 7, 2020

The main reason why this is so awesome for me, is that if you decide to crosspost to a platform like Dev.to, you can actually provide your RSS feed URL and have all of your content become drafts which you can immediately publish. It's a well known fact that cross-posting content that is originally published on your site can do wonders for your SEO rankings (provided you define a proper canonical URL for your content).

Also, if you are using Nuxt Content, you can generate a feed using a few methods described in the official documentation!

Wrapping up

Like I said before, there are tons of modules that are amazing, these are just five that I really like.

As of this blog's writing, there are currently 146 Nuxt Modules available for use on modules.nuxtjs.org (and more that simply need to be merged into the site). Go ahead and take a look and find something that sounds interesting or helpful.

Have fun exploring the awesome world of Nuxt modules!

Thanks for reading.

This article was originally posted on my website

Blog