Last week I tried my best in my first recorded live coding session on my YouTube channel. In it, I have built a very simple website that is powered by Rick and Morty API (the GraphQL one).
I really enjoyed the experience of building such app live and will definitely do more of this!
Description
In this crash course I have used Nuxt 3, Nuxt Apollo, Nuxt Tailwind and Nuxt Image modules. They all deliver a great Developer Experience by being very simple to configure. By default, Nuxt Tailwind does not require any configuration what so ever. Similarly to Nuxt Image (the only configuration that was needed was used because I needed to add domains in order to process and optimize images from another domain). If you like such easy to use modules for Nuxt 3, I can highly recommend you to try out the Nuxt Content as well :)
Enjoy!
Links
Github repository -> https://github.com/Baroshem/nuxt-apollo-tailwind
Deployed app -> http://nuxt-apollo-tailwind.vercel.app/
Rick and Morty API -> https://rickandmortyapi.com/
Nuxt 3 Docs -> https://v3.nuxtjs.org/
Nuxt Image -> https://v1.image.nuxtjs.org/
Nuxt Apollo -> https://apollo.nuxtjs.org/
Nuxt Tailwind -> https://tailwindcss.nuxtjs.org/
Summary
Let me know what other technologies you would like me to try next so that I can make a video and build some funny app out of it ;)
Top comments (3)
How would you handle data fetching if you navigate directly from id1 to id2? Without going back to index.
Every time I use asyncquery it only fetches on the first visit of [id].vue not every time the route param changes. any suggestions?
I would recommend to add a dynamic key to the useAsyncQuery github.com/nuxt-modules/apollo/blo... so that the result wont be cached. With automatically generated keys they are based on the current location in the code. So in your case they have the same key value as they are in the same place (page where you are fetching the data by id). So by adding this key, you should be able to fetch this data dynamically and only cache it if a request to it is actually to the same route with id, not just the same route.
uh great, I forgot the key properties on the most composables. I will give it a try. Thanks!