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>
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>
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)
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
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...
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:
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!
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
EmailIconjust a SVG, but it "behaves" like a Vue component.Thank you for the post. I have just started learning Vue/Nuxt and this article was very informative.