#1 Building Headless Commerce with Nuxt 3, Shopify, and TailwindCSS

Опубликовано: 18 Февраль 2026
на канале: Jacob Andrewsky

8,269

166

In this video, we will be building a simple Headless Commerce website with Nuxt 3, Shopify, and TailwindCSS.

We will fetch the products from Shopify GraphQL API and build our frontend by using Nuxt 3 and TailwindCSS.

If you are looking for a production-ready Nuxt application with Shopify, check out https://www.vuestorefront.io/ and especially, the integration with Shopify https://docs.vuestorefront.io/shopify/.

Code repository: https://github.com/Baroshem/nuxt-shop...

Nuxt.js 3 documentation: https://v3.nuxtjs.org
TailwindCSS documentation: https://tailwindcss.com/
Shopify documentation: https://shopify.dev/api
Tailwind Elements documentation: https://tailwind-elements.com/

0:00 Intro
0:16 Demo
1:23 Vue Storefront
1:38 Tools used in application
2:30 Nuxt application
2:36 Installing TailwindCSS module
2:56 Building Layout components (TheHeader and TheFooter)
3:50 TheHeader component
5:10 TheFooter component
6:00 Custom layout
6:54 Home page
7:20 Layout and Page in root app.vue
8:12 Nuxt GraphQL Client installation and configuration
10:04 Environment Variables
10:24 Products query
11:28 Using the Products Query in the Homepage
12:45 HomeBanner compoonent
13:55 ProductCard component
17:09 ProductList component
19:01 Product query
19:47 Product Detail page
23:35 ProductDetail component
30:27 Checkout mutation

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

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