J茅r么me Pott
Posted on November 9, 2019
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!
Posted on November 9, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.