Nuxt 3.10 - Speed up your build time with sharedPrerenderData

Thank you, for the quality content again. PS. Congratulations on your 2k sub 🙌

Good content

As far as I understand, useState was created for a very small amount of data to provide an instant access through the project. Once I had an interview with a company which used useState as a main state system for depencies reducung. I failed it because of a different vision of the topic😅

Seems like it’s really supposed to be the Pinia replacement inside Nuxt. But I still believe that useState is a completely different tool (even after your explanation).

Isn’t it actually better not to provide the key & let nuxt generate it automatically so that there is no way you could get a duplicate key in a large project?
The key might make sense if you need to access the state from multiple places in code, however, even then you could just create a wrapper composable around useState without key and call it instead of useState(), couldn’t you?

It's a nice explanation and usage. Thank you! I will do it!

Thank you very much for your video's they are really helpful, love them!

This is fantastic to cover! Love it! Explaining the link to useAsyncData helped me understand useState easily.

Excellent video! I have a question, why do you think it is wrong to use a global state in a composable even if you are not using SSR. Regards!

Приветствую, Александр.
Такой вопрос: в каких случаях следует использовать объявление useState вот так: const nameVar = () => useState('title', () => 'что-то');
а в каких вот так: const nameVar = useState('title', () => 'что-то');
И в чём разница?

Heh, we just installed Nuxt yesterday instead of vue-router and other libs.
This was kinda hard to get without previous experience with Nuxt, I am gonna watch more your videos on Nuxt so I can get some general overview.
Thanks btw

it's great video Alex produces content for us and it's free

Great info!! what about global state in vue without pinia?

Finally just managed to watch this all the way through! Brilliant explanation on useState and I've already thought of a place in my own codebase I could benefit from this. Thanks so much. Oh, and thanks for the raffle prize! Very chuffed. 😄

thank you for making this, great examples!

Amazing content

How do you deal with multiple instances of a component on the same page, each of which should have its own state? For example, consider the following:

const count = useState("counter", () => Math.round(Math.random() * 100));

Due to the "counter" key, each instance of the component will get the same value. However, I'd like each instance to have its own random value.

Thanks for the videos!

greatt, good channel, good content, good good good

Anothee great video! 👌 tips like this make it much easier for beginner like me to get a comprehensive grasp of how nuxt works under the hood

We deployed medium size recruitment platform using only useState + composable. Really wonderful DX and debugging. Absolute dream compared to rxjs or redux. Even with fairly big and deep JSONs.
Spinkle in some useCookies. Voila. Not sure if should be using pinia, but its working great thus far without.

Thanks for the explanation!

What should I use instead of useState() if I do not want to create a *global* state? I mean, useState() always needs a key or uses file:line as a key. But what if I need to create an SSR-friendly composable, that should return *new* state (just like a Ref) on each call? Let's say I want useRandom() composable (it's not what I really need, but I think it is a good example to understand the problem).

Without SSR I can just use a Ref. useState() needs a key, but I can't generate a key (that will be the same on the server and on the client) as there is nothing I can use as a source data. file:line key is also not suitable here as useState() will be always called from the same file:line (because it is called inside of my composable). Maybe there is a helper/something to generate a key based on a stacktrace of the current call or an other way to solve this?

Basically, I need a Ref, but SSR-friendly.

Great explanation! Thank you, Alex

thanks for the great content Mr Alexander, please if you can make video explaining JS execution/useFetch on server/client like common issues or tips because that confusing sometimes especially in my case where i want to make ecommerce and for example should i fetch the product (singular) on the server for better SEO while the profile page can be ssr false. Thanks Again

I really enjoyed your video! It was so clear and detailed, and I thought it was awesome. Keep up the great work!

Thank you!

First of all, excellent videos! I have a problem that I've been stuck on for a while, could you help me? I have a composable called useQuiz, to handle a quiz, its questions, and the options for each question. I would like to manage the state of this quiz with useState in my composable, but I don't know the correct way to store the result of useFetch or useAsyncData in the quiz variable of my composable to manage the state across all child components. Maybe my implementation is not correct, should the result be placed in the onResponse? Or maybe inside the useAsyncData handler?

Awesome video. Been using useState so much in my application; it actually helped me understand WHEN to use Pinia as a state management tool. On a sidenote, may I ask if you would be willing to cover how the <client-only> wrapper component works in Nuxt? I sometimes get mismatches warnings in my console and I resort using to this component but I never fully understood why and I couldn't find a good answer in the community?

Thanks for this informative video!

your videos opened my eyes.....

Can you point out when using refs in nuxt 3? pls

I wish the doc was clearer

There is a problem. I'm using one component outside layout and one inside layout. Both depends on the same state. When I change the value from inside layout, the value of the component outside layout doesn't update in SSR.

<Navigation /> // this component doesn't update when the value is changed in layout
<NuxtLayout><NuxtPage/></NuxtLayout> // the vaule is changed here

The problem solves when I use <Navigation /> inside layout

But useState triggers my React related PTSD.

Alexander, I have multiple frontend projects that merge into one using a Nuxt layer. I need a unified state management solution for these projects. For example, one UI manages robot jobs, while another displays job reports. What would you advise for more generic store mechanism? How can I integrate useFetch with state management, considering useFetch is typically used only starting points of component or composable? I feel like if I use state management, I will have to give up useFetch.

Honestly I don't really understand your explanation language-wise and systematic. Too chaotic for me.

So how would I manage global state with useState do I create a composable for this and manage the state in that composable? do you have a seperate video on this? I'm sadly a glorified React dev learning vue/nuxt. So the concepts don't click yet.

One question, i need the page not to render in the source of my ssr page the "NUXT_DATA" script, or if it has to be in the page which is fine, to not include all of my state, is there anything for that? It does not matter if its with pinia or useState, If its a large application it could include a lot of needless things.

your video is awesome, it's talked about more details about useState than official weisite，thank you～

Interesting video, I have one question regarding the fix to move the `useState` inside the composable and making it an argument for using `useState`… but couldn't that just be done with a `ref()` then as well (moved inside the composable)? Or are there arguments against this or `useState` somehow special (aside from the SSR compatibility)?