Store files and K/Vs in Nuxt and Nitro - Powered by unstorage
Вставка
- Опубліковано 9 лип 2024
- 💾 Reading and writing information is important for an application, be it for storage, caching or more. But especially with all the available runtimes and platform (think serverless, edge, ...) and storage options, it became more and more complex. Luckily, useStorage, powered by the unstorage package, can help us there! Let's see how!
---
Key points:
🔢 Various useStorage examples you can use in your project
✨ Using different stores
🤿 Dive into unstorage and it's capabilities
---
Links:
🔗 Full code github.com/manniL/alexander-l...
🔗 Custom cache driver example github.com/nuxt/nuxt/pull/26104
🔗 unstorage unstorage.unjs.io/
🔗 Nitro nitro.unjs.io/
📺 Building an Association Manager with Nuxt • Stream VOD #006 - Buil...
📺 DejaVue #E006 with Julien Huang • DejaVue #E006 - Nuxt S...
📺 Speed up SSG with sharedPrerenderData • Nuxt 3.10 - Speed up y...
📺 Env-aware Nuxt config • 😲 An environment-aware...
📺 The most common runtimeConfig mistake • Nuxt's runtimeConfig -...
📺 DejaVue UA-cam Channel / @dejavuefm
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
00:50 useStorage overview
01:29 Demo app setup
01:55 Trying out useStorage
04:48 "Refreshing" the data
11:51 Using different storages
13:40 Naming and customizing storages
14:35 Available drivers - unstorage
16:58 Storage override in dev mode
18:03 runtimeConfig to set credentials
20:34 Summary
21:21 Raffler Winners!
22:20 Outrooooo - Наука та технологія
What will you use useStorage for? Or what do you want me to show with it? 👀
My favorite channel lately. Thanks for sharing deeper content
My pleasure! That’s the content I was missing back when I got into Vue and Nuxt ☺️
right as I was struggling with some KV management this beauty drops, thanks!
What a timing! Glad to hear 🙌🏻
I love Nuxt man.
Same here 💚
But it is pretty amazing that we can even use it in non-Nuxt project, making life easier if you have some legacy projects or simply JS "backend-only" things
This is gold. Thank you for sharing.
Of course! You are welcome 🙌🏻
Hello. Alexander, please, tell us how to organize the storage of client files (photos of users, products, etc.) in Nuxt with the possibility of their further use on the frontend
Благодарю за интересное и полезное видео с подробностями 👍
Всегда пожалуйста! ☺️
Sweet!
Congrats and see you in a few days 🙌🏻
Hey Alex. Great showcase as always.
I've built a file/media explorer in Vue (with the ability to create folder structures, moving and renaming folders and files, drag and drop, recycle bin, image/video previews etc.). Now, I am looking for ideas to keep it as a pure frontend component only so a dev can plug it into any file hosting solution of their liking (be it your own backend/API or a third party solution like AWS S3, filestack, etc.). Obviously I'd like it to be as easy as possible for any developer to use their own storage solution. What do you think about using unStorage in this case? Any other considerations or alternative candidates?
P.S.: You put a lot of effort in your tutorials and that's much appreciated. This is exactly the thing we devs are looking for, show- and use cases for plugins within the vue eco system!
Regards from Oz :)
Greetings to the other side of the world! Hope to be there one day for once 🙌🏻
If you want to keep it "fully agnostic" (which is what you desire) then you "just" have to define events your component(s) emit and leave it up to the user what to do.
I'd go that way and provide at least 1-3 examples on how to integrate with: An own API, unstorage/useStorage (due to the support of soo many drivers) and one of example of your liking.
This seems like the best way from my POV 😋
---
I try to make them short but also concise and "deep enough"! Delighted that you enjoy them and that they hit the right level of depth and effort 🙌🏻
@@TheAlexLichter If you ever make it to Brisbane (I hope you do) I can offer you a spare desk, fast internet, and the free use of my espresso machine. ;) Gruesse von einem Exil-Dresdner. Danke! :)
Hello u doing great videos, and if u take offers please make more videos about nitro please😊
Sure thing - they are in the backlog!
Is it a good and safe idea to create a session system using unstorage similar to the one in PHP? What I mean is creating a file named with a session ID and an ID saved in a cookie to easily identify the file
Yes, you can definitely do that with unstorage! There is also a useSession composable which will make it easier 👌🏻
@@TheAlexLichter thanks a lot for your help, I appreciate your work 🙌
What snippets are you using in VSCode?
My own custom ones are only two I really use: vcomp for a simple Vue Component scaffolding and neh (nitro-event-handler) for the event handler scaffolding 😋
Planning to add more though!
can you please make a video on how to save in-memory data to a database when the server shuts down? For example, if I am using the server api, and i have some data in memory in the api code that i want to reuse when the server restarts, how can i do that?
Noted 👌🏻
@@TheAlexLichter 🙏
Very usefull thank you, Can you do a video about using Sqlite DB please? Thanks
Sure! I've shown it in my stream recently (VOD @ ua-cam.com/video/mPYIgr95mQw/v-deo.html) but I might do a full video on it
How can I connect my nuxt with laravel?
I don't want to use axios
Use $fetch or a proxy 😋
Thanks
thank you. Really helpful videos.
Happy that they are 🙏🏻
what real world examples of useStorage in production?
I've used it to store/cache large data files, e.g. at build time (but also at runtime if needed). Example here: github.com/D2Arsenal/d2arsenal.com/blob/main/utils/server/manifest.ts#L27-L29
Other cases are often involving caching: user preferences, responses etc.
And of course you can use it also as very simple "storage" solution if you don't have relational data, e.g. a simple message history
thanks for the vid.
am using unstorage for cache and cloudflare worker
waiting for useDB to support mysql/postgre
want to help contribute but too newbie still T_T
Try out Nuxt Hub! Worth having a look into that. Used it in my recent VOD (linked in the description) and it is pretty sweet!
db0 can connect to Cloudflare D2 🙌🏻
With regards to contributing: there are lots of options, especially for a “newbie”. For example raising issues where docs are unclear (or fixing them) as well as checking the “good first issues” ☺️