Nuxt, Shopify, and Storyblok Crash Course

Hello There!

In this crash course, you will learn how to build a Composable Commerce application with Nuxt, Shopify, and Storyblok. For styling we will be using TailwindCSS and we will deploy the app to Vercel.

Check out Vue Forge - https://vuejsforge.com/

Code repository - https://github.com/Baroshem/nuxt-shopify-storyblok
Deployed app - https://nuxt-shopify-storyblok.vercel.app/
Article - https://dev.to/jacobandrewsky/series/22317

#javascript #programming #developer #nuxtjs #image #optimization #opensource #tailwindcss #css #typescript #community #opensource #vuejs #nodejs #nuxtjs #typescript #shopify #storyblok #commerce #headlesscms

-------------------------------------------------------------------------------------------------

Twitter - https://twitter.com/jacobandrewsky
Blog - https://dev.to/jacobandrewsky
Linkedin - https://www.linkedin.com/in/jakub-andrzejewski/
Github - https://github.com/Baroshem

Timestamps:
0:00 Intro
0:40 Vue Forge Spoiler
1:17 What is Composable Commerce?
2:25 Deployed application
3:55 Generating a new nuxt project
4:25 Adding Tailwind to the project
5:20 Building the basic layout with TheHeader and TheFooter components
8:40 Optimizing images with Image module
9:30 Creating the HeroBanner component
13:30 Creating a ProductCard component
17:30 Product Detail Page
20:30 Connecting to Shopify GraphQL API with Apollo module
23:20 Get Multiple Products Query
30:20 Get Single Product Query
36:15 Fetching the related products
39:05 Generating a Checkout URL
41:50 Storyblok Dashboard
45:30 Connecting to Storyblok from our Storefront
47:45 Shopify plugin for Storyblok
50:00 Fetching data from Storyblok
55:00 Deploy the app to Vercel

Видео Nuxt, Shopify, and Storyblok Crash Course канала Jakub Andrzejewski