Best way to save user context to avoid needing to fetch at every page?
What's the best, but mostly simple, way to save user context to avoid needing to fetch at every page?
The user context comes back from an API that I call server-side. Server Middleware helps me with the user context on the server-side, but I can't figure out how to replicate the same behavior for the pages/ directory
2 Replies
The most simple and rudimentary way to save some state is
There are many best practices for something like this, but useState will get the job done.
Context: https://nuxt.com/docs/api/composables/use-state
Watch the video from Lichter linked on the page.
My second favorite would be using KV Cache in your Nitro layer, depending on your environment.
https://www.youtube.com/watch?v=KN5e2Hh6uC0
Nuxt
useState · Nuxt Composables
The useState composable creates a reactive and SSR-friendly shared state.
Alexander Lichter
YouTube
Caching in Nitro 💾
Caching in Nitro is one of its key aspects. In this video, we have a look at how to achieve caching in your Nitro-based application. Also works in Nuxt!
#nitro #nuxt #vue
---
Links and Resources:
🔗 10% Off for vuejs.de Conf with Code LICHTER https://conf.vuejs.de/tickets/?voucher=LICHTER
📺 @DejaVueFm #E018 - Insights from the Nuxt Team Retr...
Thanks for taking the time to answer!
I'm running into the same nasty issue than here, after all: https://github.com/nuxt/nuxt/discussions/25602
I'm calling the composable from the nuxt/middleware (not server/middleware) and I'm getting that error
GitHub
Component is already mounted, please use $fetch instead · nuxt nuxt...
pages/a.vue `<script setup lang="ts"> const click = async () => { useFetchPost("/api/test", {}) .then(async res => { await navigateTo('/conter') }) } </sc...