Weekly Vue News #146

My Top 5 Nuxt Modules

Hi 👋

I played around with Coolify and use it now to manage my self-hosted services like Grafana, my PostgreSQL database for my analytics provider and more.

It's an amazing tool that helps me to manage my services in a more efficient way. I can highly recommend it.

Have a nice week ☀️

Vue

📕 Handling Async Components' loading errors

👉🏻 Abdelrahman explains how to handle errors if you are using async components in Vue.

📕 How I Discovered to Not Put EventListeners in On Mount in Vue SPAs

👉🏻 The author explains why you should not forget to remove event listeners in your Vue components.

📕 Vue Tips

👉🏻 A collection of Vue, Nuxt and Vite tips, tricks and good practices.

📹 State of Vite & Vue 2024

👉🏻 Evan You talked about the 10 years of Vue's history in this talk at Vuejs Amsterdam 2024.

🛠️ Vue DevTools Next v7.2 is out

👉🏻 Ship Vuex/Vue Query/Vee Validate DevTools

👉🏻 Add `launchEditor` option to specify the editor

👉🏻 Further compatibility with legacy DevTools plugin API

🛠️ New phone element in open-source Vueform

👉🏻 Vueform's phone element is out and it's free to use for everyone.

Nuxt

📕 Building a blog with Nuxt content - Part 1

👉🏻 In this article explore how to setup a blog using Nuxt and Nuxt Content.

📕 Nuxt + Supabase = Technology Stack of Dreams

👉🏻 Jakub tries to convince you why he thinks that Nuxt & Supabase is a technology stack of dreams.

📕 Avoiding lock-in for your image pipeline with Nuxt Image and Netlify Image CDN

👉🏻 Nuxt sites using Nuxt Image have great portability, and automatically use Netlify Image CDN under the hood when deployed to Netlify.

📹 Migrate to Nuxt 4 NOW!?

👉🏻 Alexander Lichter provides condensed info about the Nuxt 4 major version.

👉🏻 He explains how to migrate today and opt in to breaking changes.

📹 You're Probably Using Nuxt Wrong

👉🏻 Matt explains the internals of the useAsyncData composable from Nuxt which is used to fetch data from APIs.

🔥 My Top 5 Nuxt Modules

Nuxt modules can be used to enhance or extend any Nuxt applications.

With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself.

Let me show you my top 5 Nuxt modules:

1. Nuxt Content

Nuxt Content reads the content/content/ directory in your project, parses .md.md, .yml.yml, .csv.csv and .json.json files to create a powerful data layer for your application. Additionally, you can use Vue components in Markdown with the MDC syntax.

I heavily use this module in my portfolio website.

2. Nuxt SEO

Nuxt SEO is both a collection of modules and a module itself. The Nuxt SEO module is all the SEO modules combined into one that is guaranteed to work well together.

Easy to use and configure, Nuxt SEO is the perfect solution for your Nuxt application.

3. Nuxt Image

Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.

Supports many providers like Cloudinary, IPX, Imgix, and more.

4. Nuxt UI

Nuxt UI simplifies the creation of stunning and responsive web applications with its comprehensive collection of fully styled and customizable UI components designed for Nuxt.

Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.

I use it for mokkapps.de and weekly-vue.news.

5. Nuxt Tailwind CSS

The Tailwind CSS module for Nuxt enables you to set up Tailwind CSS in your Nuxt application in seconds, with many goodies.

A must-have module for every Nuxt project that uses Tailwind CSS.

Of course, there are many more awesome Nuxt modules available. This is just a selection of my top 5 modules. Some modules that I also recommend are: Nuxt ESLint, Nuxt Fonts, VueUse and Nuxt Supabase.