Class Serialization with SSR in Nuxt - no more POJO error messages!

[@TheAlexLichter]

Are you a fan of classes in JavaScript?

[@ReDestro69]

Not a fan of OOP in general😂

[@CodeZakk]

Yes I use that if you use angular it uses classes everywhere. It makes your code more reusable and organized. ❤

[@TheAlexLichter]

@ReDestro69 I actually like it for the back-end but if everything is composable and a bit more functional, that's my favorite 👌

[@TheAlexLichter]

@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 kzbin.info/www/bejne/n3zEdXl3rd99r9k 😊

[@breezycodes]

In Nestjs, yes... otherwise, no

[@solay3985]

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...

[@TheAlexLichter]

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? 😊

[@solay3985]

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.

[@TheAlexLichter]

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 👍

[@luc122c]

I’ve seen this so many times dealing with Firebase Document references 😂 This is great, thank you! If only I’d have known earlier.

[@TheAlexLichter]

No problem Luc! Hope it'll help for the future 😋

[@Reagan_Dev]

I'm excited for the Nitro topics 🙌👏

[@TheAlexLichter]

Me too! Anything specific you want to see covered 👀

[@SKTTWkartrider]

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.

[@TheAlexLichter]

nuxt.com/docs/api/composables/use-nuxt-app#payload

[@sania3631]

Thanks! As usual... great video.

[@TheAlexLichter]

My pleasure! 😊

[@voi__wood5508]

great video, thank you for your excellent work

[@TheAlexLichter]

You are welcome! 🙌

[@cat_copilot]

Thanks for sharing this info

[@TheAlexLichter]

You are welcome 👌

[@productdevbook]

Thank you

[@TheAlexLichter]

No problem at all 😊

[@qqlash]

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?

[@TheAlexLichter]

Will add it to the list, sure!

[@MatheusPachecoPacheco-j2f]

"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

[@TheAlexLichter]

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.

[@gruceing]

Does this work with useFetch? In transform?

[@TheAlexLichter]

Yes, it does!

[@beedav9236]

I am experiencing these same problems when serializing types. How do you serialize a export type A = {}?

[@TheAlexLichter]

Types do not exist during runtime and thus don’t need to be serialized 👀

[@beedav9236]

@@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.

[@TheAlexLichter]

Can you provide a reproduction by any chance? Happy to have a look

[@beedav9236]

Yes, I just a little time to create some data to replicate the results from MongoDB. Where you want me to put the example?

[@beedav9236]

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.....'

[@виртуоз_ру]

Шляпа какая-то 🤣

[@TheAlexLichter]

🤣🤣🤣