Shopify Liquid Development - Using Javascript Frameworks (React, Vue, Svelte, etc)

In this video we are going to see how to use Javascript frameworks such as Vue, Svelte or React in a Liquid theme. This approach is intended for when for one reason or the other you need to reach for one of those frameworks to build a section of your Shopify theme. For building the whole storefront of a store using a framework the recommended approach is either Shopify Hydrogen or using Shopify’s API to build a headless store in the technology of your choosing.

Resources

Timestamps
00:00 - Introduction
01:55 - Setup
02:32 - Vite Setup
03:55 - .shopifyignore
06:15 - Updating the Vite configuration
10:16 - Adding an interactive component
10:58 - Inspecting the File Size
12:20 - Adding Multiple Components
19:00 - Add to cart button in React
19:19 - Sending data from Liquid to React
23:14 - Interacting with the store from React
28:23 - Emitting Events from React to the Theme
30:48 - Lazy Loading

[Lucaaaaaaaaaah]

Thank you! It would be very useful to see a video where you show how to use vite for the compilation of assets instead og style, maybe with vite 6 + tailwind 4

[javaidb]

Amazing. Looking for more video like this. Please create something project basis.

Like pull pages content, and show them using react. Or create a mega menu using react js.

[akilvarl]

Don't you think it makes more sense to use Hydrogen Storefront? As a Front End Developer, I think Shopify's Hydrogen is very logical for this complex structure.

[zobeklol]

In that way i use alpine is lightweight and minimal framework for this case of use.

[catalincatalin]

Thanks for the content. I didn't really understood why you have removed the client script and how exactly each file contains it after you generated the intersection observer

[nguyenthanh]

Can you share link github project thanks