DEV Community

Cover image for Nuxt 3, Apollo GraphQL, TailwindCSS Crash Course
Jakub Andrzejewski
Jakub Andrzejewski

Posted on • Updated on

Nuxt 3, Apollo GraphQL, TailwindCSS Crash Course

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 (4)

Collapse
 
clex1o1 profile image
Clex1o1

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?

Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski

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.

Collapse
 
clex1o1 profile image
Clex1o1

uh great, I forgot the key properties on the most composables. I will give it a try. Thanks!

Collapse
 
xc6pm profile image
Hossein Ebrahimi

Any ideas why using the expression for binding to grayscale didn't work?