Nuxt 3, Apollo GraphQL, and TailwindCSS Crash Course
This is my first recorded live coding session in a new format. In it, I am building a simple Nuxt 3 application that can fetch the data from Rick And Morty API by using the Apollo GraphQL. For styling I am using TailwindCSS and for image transformations I am using the Image module with default IPX. Finally, I have deployed the app to Vercel just to see how it works in production.
Enjoy!
Code repository - https://github.com/Baroshem/nuxt-apol...
Deployed app - http://nuxt-apollo-tailwind.vercel.app/
#javascript #programming #developer #nuxtjs #image #optimization #opensource #graphql #apollo #tailwindcss #css #typescript #rickandmorty
-------------------------------------------------------------------------------------------------
Twitter - / jacobandrewsky
Blog - https://dev.to/jacobandrewsky
Linkedin - / jakub-andrzejewski
Github - https://github.com/Baroshem
Timestamps:
0:00 Intro
0:45 Technology Stack
3:00 Writing Custom Queries
6:00 Work with Nuxt Apollo
9:00 Work with Nuxt Tailwind
10:20 Work with Nuxt Image
11:40 Create CharactedCard component
16:07 Use CaracterCard component in app.vue
21:22 Add some basic styling
27:10 Fixing issue with modifiers in NuxtImage
31:30 Add NuxtLink to CharacterCard
32:30 Create characters/[id].vue page
33:40 Create index.vue page
35:00 Create character Query (debugging)
40:30 Deploy to Vercel