DEV Community 👩‍💻👨‍💻

Jérôme Pott
Jérôme Pott

Posted on • Updated on

4 Underrated Nuxt Modules

Post updated with the release of Nuxt v2.13: replaced nuxt-payload-extractor with nuxt-netlify-cache

1. nuxt-polyfill

Do you have to support that dying IE11? Then you probably need some polyfills. An easy and performant way of adding polyfills is through this plugin: nuxt-polyfill

2. nuxt-svg-loader

SVGs are great and performant, especially when inlined. However, the inlined code can quickly become unwieldy. It would be great to be able to import them as you would import Vue components, and even pass props to them, right? Well look no further: nuxt-svg-loader has got you covered.

Tip: if you work with Tailwind, you can easily use Tailwind classes to control the size and the color of the SVG.


<my-imported-svg class="fill-current text-teal-500 inline-block h-12 w-12"><my-imported-svg>

Enter fullscreen mode Exit fullscreen mode

3. portal-vue

Thanks to this Vue component, you can organize your HTML code logically and not according to the rules of the DOM. For example, if a button opens a modal, you can have that modal right next to the button in your code, but have it rendered before the closing body tag. portal-vue is a truly versatile component, which will be built into Vue 3!

<body>
 <main>
  <div>
   <button>Open Modal</button>
   <portal to="modal">
    <div>My Modal</div>
   </portal>
  <div>
 </main>
 <portal-target name="modal"></portal-target>
</body>

Enter fullscreen mode Exit fullscreen mode

4. v-lazy-image

The Intersection Observer API is now supported in all major browsers and lets you do stuff like programmatically load images. Although that API is not so complicated, it still takes some time to implement the logic for lazy loading images.
In Chrome you can already write <img loading="lazy">, but it will take a while before the other browser vendors support this new attribute.
In the meantime, use v-lazy-image to achieve the same effect! You can even provide a low-resolution placeholder!

Top comments (5)

Collapse
 
chayvez profile image
<blank>

Hello, thanks for the information about this. I've been developing using nuxt.js recently and I need to support IE, I tried using nuxt-polyfill and followed the instruction in their GitHub, but I can't get to work it out. Can you possibly show some code samples of how you are using nuxt-polyfill if ever to help me out using this package? Thank you in advance! More informative posts to come. <3

Collapse
 
mornir profile image
Jérôme Pott Author

Thanks for your kind words
About your question, it depends what feature you try to polyfill. I also had trouble with this. Here's an example from one of my projects:
gist.github.com/mornir/b62ed60f806...

Collapse
 
kp profile image
KP

Thanks for the post...love some more articles on Nuxt.js, since it's still a young-ish framework and not a lot has been built on top of Nuxt.

On this piece, I'm very interested in using:

  • nuxt-svg-loader
  • v-lazy-image

in my Nuxt.js project. Could you possibly show some code examples (that are ideally copy-paste) to help us get started with these? Thanks!

Collapse
 
mornir profile image
Jérôme Pott Author • Edited on

Hi! Glad you liked it.
Here are two real-word examples ☺

v-lazy-image: github.com/mornir/makeup-website/b...
Sanity CMS automatically generates Low Quality Image Placeholders (LQIP) for uploaded images.

nuxt-svg-loader: github.com/mornir/makeup-website/b...
Here is EmailIcon just a SVG, but it "behaves" like a Vue component.

Collapse
 
eclecticcoding profile image
Chuck

Thank you for the post. I have just started learning Vue/Nuxt and this article was very informative.

What image format should you use in your next project? 🤔