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 - • Custom $fetch and Repo...
🔗 Code - github.com/manniL/alexander-l...
🔗 Docs - nuxt.com/docs/guide/directory...
🔗 Julien's "all parallel" module - github.com/huang-julien/nuxt-...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / 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

[@TheAlexLichter]

Are you planning to use the object syntax now? 👀

[@Saeid-Za]

Thank you so much for providing such amazing content ❤. The developer experience of Nuxt is unparalleled. Every aspect of the framework's API is engineered with great care, and even better, these improvements come with free performance boosts. A huge thank you to Daniel and all other contributors for creating such an incredible framework. Please keep the regular uploads coming 🤘.

[@TheAlexLichter]

Thank you so much for the kind words 🙏🏻 Really delighted that you enjoy using Nuxt and that the content is helpful 🔥

[@virtuoz-ru]

Хорош 👍 Твои видео уже нужно в документацию Nuxt включать.

[@wat_question_mark]

not only well versed and smart, but also handsome!

[@TheAlexLichter]

Thank you 🙏

[@productdevbook]

Thank you

[@TheAlexLichter]

You are welcome! 🙌

[@ojvribeiro]

Nuxt is the GOAT ♥

[@TheAlexLichter]

💚

[@tiagogoncalves2012]

Great video again! :) Can you make a video comparing building a package vs a Nuxt module

[@TheAlexLichter]

Thanks! You mean building an NPM package vs. Nuxt module?

[@EvestDev]

2:57 OOP

[@Ayvengo21]

Some times i just hate those auto load magic because as rule it completely different between frameworks and so you always have to learn all those things from scratch.

[@TheAlexLichter]

Luckily you can also fully opt out of them 👌🏻

[@mnmb961]

Is it a good practice if i were to intiate db connection via plugin server so that it can be used throughout the apps ? Thanks

[@TheAlexLichter]

I’d do this in a nitro plugin ☺️

[@mnmb961]

@@TheAlexLichter can we do the object syntax for nitro plugin also as in nuxt plugin ?

[@dlef]

could you speak about lots of visits and how to deploy the thing without the corps ? thks you if you do

[@TheAlexLichter]

What do you mean with “without the corps”? 👀

[@fikreteliyev2266]

Please show nuxt api interseptor (look like vue axios interseptor)

[@TheAlexLichter]

Sure thing! It is documented here and should work - github.com/unjs/ofetch?tab=readme-ov-file#%EF%B8%8F-interceptors but I will dedicate a video to it 👍

[@lassdasi]

Why should I define some functions as a plugin (like the $api) instead of importing it explicitly?

[@TheAlexLichter]

You can also import them explicitly but the initializing (eg passing runtime config values) might be more tedious.

[@wolfphantom]

my $api isn't being typed by Nuxt, so while it IS present on the NuxtApp it isn't including in the type definition and appears as "unknown"

[@TheAlexLichter]

Even after restarting the dev server? 👀

[@wolfphantom]

Yes. Even after a restart, and I’ve also extended the interface in an index.d.ts file as per the website without success.

[@TheAlexLichter]

@wolfphantom do you have a reproduction to take a look at? 😊

[@SkillnoMusic]

what if i want to use fetch raw?

[@TheAlexLichter]

Not sure I understand the question. $fetch.raw should work fine ☺️

[@Gaijin101]

Would a NitroPlugin be similar?

[@TheAlexLichter]

Actually not! Nitro plugins are unrelated to Nuxt and run only on the server. It is quite different 😁