The Nuxt Plugin Object Syntax - Wins for Perf, DX and Logic!

💻 Nuxt plugins might not be new for the most of you - but when creating them you probably use a function á la defineNuxtPlugin(function() {...}), or the arrow function equivalent. Even though there is a *new* syntax that you can use, which is not only "backwards"-compatible but also offers more features along the way. Key points: 🎛️ Compare the function and object syntax for Nuxt plugins 👩‍💻 Taking a deep look inside the source code ✨ Learn about new features, for example dependsOn and parallel --- Links: 📺️ Repository pattern and custom $fetch - https://youtu.be/jXH8Tr-exhI 🔗 Code - https://github.com/manniL/alexander-lichter-plugin-object-syntax 🔗 Docs - https://nuxt.com/docs/guide/directory-structure/plugins#object-syntax-plugins 🔗 Julien's "all parallel" module - https://github.com/huang-julien/nuxt-auto-parallel-plugins Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up! 🌐 Connect further: Website: https://www.lichter.io Twitter/X: https://twitter.com/TheAlexLichter Twitch: https://www.twitch.tv/TheAlexLichter Chapters: 00:00 Intro 1:03 Looking into the demo app 3:02 Let's see if it works! 3:25 Why we see an error 3:55 Possible fixes 4:55 Diving into the object syntax & finding a fix 6:25 Defining a name and use dependsOn and solving the problem 8:00 One more for performance with parallel 9:36 What Nuxt 4 might bring us 10:30 The env property 10:52 One last thing - The enforce option 12:35 Summary Keywords: defineNuxtPlugin nuxt plugin object syntax