Class Serialization with SSR in Nuxt - no more POJO error messages!
Вставка
- Опубліковано 9 лип 2024
- 🙉 Using classes with Vue and Nuxt is not the most common approach - but no matter if you chose to because of preference or because a library provides some classes you need to use, they are there. But especially with Server Side Rendering, there are a few pitfalls using classes for state. In this video, we see what they are, why they exist and how to make it work nevertheless!
Key points:
🛠 The most common problem when using classes (you probably have seen that all)
💚 How resolve it with in-house features!
🕶 Enrich your Payload and make classes usable as state. No matter if own ones or library-based classes
---
Links:
🔗 Code: github.com/manniL/alexander-l...
🔗 Docs nuxt.com/docs/getting-started...
🔗 Existing revivers: github.com/nuxt/nuxt/blob/mai...
📺️ Why you should use useState() • Why you should use use...
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
01:26 Demo app check
02:06 The dreaded error message
02:27 Explaining the message and serialization
04:03 Payload features to serialize any type of data
07:54 Inspecting the payload manually
08:40 Summary - Наука та технологія
Are you a fan of classes in JavaScript?
Not a fan of OOP in general😂
Yes I use that if you use angular it uses classes everywhere. It makes your code more reusable and organized. ❤
@ReDestro69 I actually like it for the back-end but if everything is composable and a bit more functional, that's my favorite 👌
@CodeZakk Yes, I know in Angular you can't get around them :D Same for Web components. With regards to organization, especially in Vue, there are better patters IMO - see my 2nd latest video ua-cam.com/video/iKaDFAxzJyw/v-deo.html 😊
In Nestjs, yes... otherwise, no
I'm surprised this is not mentioned at all in the docs. This is really good to know.
We have some big pinia stores where we didn't use classes. Welp, time to do some refactoring...
Oh it is mentioned - the link to the docs is in the video 😋
In Vue/Nuxt I mostly prefer composables over classes. But I'm very curious - why did you choose classes in your project? 😊
Hm.. I can't find information about `definePayloadPlugin` there and think it should definitely be documented.
We are using classes to encapsulate logic that is not necessarily vue-related (e.g. sharing classes across projects).
We are a bit biased though, because we are used to OOP.
It is mentioned in nuxt.com/docs/api/composables/use-nuxt-app#payload
But right now, there is no difference between defineNuxtPlugin and definePayloadPlugin 👌
Ah, interesting! Good to know 👍
I’ve seen this so many times dealing with Firebase Document references 😂
This is great, thank you! If only I’d have known earlier.
No problem Luc!
Hope it'll help for the future 😋
It's interesting to know how to handle custom payloads as `definePayloadPlugin` is not even documented on Nuxt website. Not sure whether there's a documentation PR for it.
nuxt.com/docs/api/composables/use-nuxt-app#payload
I'm excited for the Nitro topics
🙌👏
Me too! Anything specific you want to see covered 👀
Thanks! As usual... great video.
My pleasure! 😊
great video, thank you for your excellent work
You are welcome! 🙌
Thanks for sharing this info
You are welcome 👌
Thank you
No problem at all 😊
Could you create a video about lazy importing external libraries? eg. I would like to use popper in my app, and want to load it lazy on demand and to have types?
Will add it to the list, sure!
Does this work with useFetch? In transform?
Yes, it does!
I am experiencing these same problems when serializing types. How do you serialize a export type A = {}?
Types do not exist during runtime and thus don’t need to be serialized 👀
@@TheAlexLichter However, I am getting the same error when I use a type. It is the only type in a very small project I am trying out. I don't have any classes in the project.
Can you provide a reproduction by any chance? Happy to have a look
Yes, I just a little time to create some data to replicate the results from MongoDB. Where you want me to put the example?
Could it be possible I am seeing this error because I am making axios.get() calls in my composables and returning the result as a type object? When I hover over the result returned from axios, I see that it is the type I defined for the object. I am not using the server/api but making axios calls directly in my composables and returning the response unchanged to the script in my component. I then save the state as const result like this useState('dataResult', () => responseFromAxios). If I then try to access this state in another part of the application as const myData = useState('dataResult') that was stored earlier, I get the error 'cannot stringify arbitrary non POJOs etc.....'
"Using classes with Vue and Nuxt is not the most common approach" - Why is this not a common approach? I am experienced in Vue and recently started using nuxt. I like to use classes to encapsulate logic, such as a cart class in a pinia state to manipulate, additions, discount calculation, etc.
What would be the best practices for working with classless (or with) nuxt?
Ps.: Sorry for my English, I'm Brazilian
Various reasons: A main point is that it is really tricky to work with Vue's reactivity and classes, which internally manage own state. Another one is that classes are not easily serializable as shown in the video.
Insteado f a cart class for pinia, you can use state refs (or reactive if you want to) + functions, while still containing it in the same file ☺️
I personally never use classes in Nuxt, unless a library I have to use only provides classes.
Шляпа какая-то 🤣
🤣🤣🤣