Some time ago I have recorded a Crash Course about building a simple image gallery with Nuxt 3, Algolia, Storyblok and TailwindCSS. This project is an example of building a relatively simple application that utilizes more advanced concepts such as composable architecture.
It can be easier to explain this concept by looking at the below simple diagram:
How this application will work is basically we will be fetching results from Storyblok and Algolia inside our Nuxt application but we will also keep both these sources in sync so that once we will create a new Cat Image record in Storyblok, it will also be added to Algolia index so that we can easily search through it fast.
Take a look at the video below to see all the code step by step:
Links
Below you can see the links that I have also used in my video for reference:
- Original article on Storyblok website -> https://www.storyblok.com/tp/digital-experience-nuxt-3-algolia-tailwindcss
- Deployed application to Vercel -> https://nuxt-storyblok-algolia-tailwindcss.vercel.app/
- GitHub repository with source code -> https://github.com/Baroshem/nuxt-storyblok-algolia-tailwindcss
Summary
And that's it! This shows how quickly and easy you can build an application with Nuxt 3, Algolia, and Storyblok that will be able to fetch data from several source and update it on demand.
Let me know what other crash courses you would like me to cover next time :)
Top comments (0)