The Nuxt Plugin Object Syntax - Wins for Perf, DX and Logic!
Вставка
- Опубліковано 9 лип 2024
- 💻 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 - Наука та технологія
Are you planning to use the object syntax now? 👀
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 🤘.
Thank you so much for the kind words 🙏🏻
Really delighted that you enjoy using Nuxt and that the content is helpful 🔥
not only well versed and smart, but also handsome!
Thank you 🙏
2:57 OOP
Nuxt is the GOAT ♥
💚
Please show nuxt api interseptor (look like vue axios interseptor)
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 👍
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.
Luckily you can also fully opt out of them 👌🏻
Why should I define some functions as a plugin (like the $api) instead of importing it explicitly?
You can also import them explicitly but the initializing (eg passing runtime config values) might be more tedious.
Thank you
You are welcome! 🙌
Хорош 👍
Твои видео уже нужно в документацию Nuxt включать.
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
I’d do this in a nitro plugin ☺️
@@TheAlexLichter can we do the object syntax for nitro plugin also as in nuxt plugin ?
could you speak about lots of visits and how to deploy the thing without the corps ? thks you if you do
What do you mean with “without the corps”? 👀
Great video again! :)
Can you make a video comparing building a package vs a Nuxt module
Thanks!
You mean building an NPM package vs. Nuxt module?
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"
Even after restarting the dev server? 👀
Yes. Even after a restart, and I’ve also extended the interface in an index.d.ts file as per the website without success.
@wolfphantom do you have a reproduction to take a look at? 😊
what if i want to use fetch raw?
Not sure I understand the question. $fetch.raw should work fine ☺️
Would a NitroPlugin be similar?
Actually not! Nitro plugins are unrelated to Nuxt and run only on the server. It is quite different 😁