Augmenting Shopify with Vue.js

on YouTube ↗25m

" summary

Builds a customized Shopify product page that accepts Rails-stored configuration, manages complex selections across two pages, updates computed totals live, and posts the assembled data to two APIs. Uses Shopify + Rails + Vue via CDN so only a few theme files change, avoids a full SPA, and solves Liquid/Vue conflicts with a delimiter change. Stores related-product data in metafields and reports that the pattern deploys successfully and is now reused on multiple client projects.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 0:43Outline
3. 1:10Started working with Shopify
4. 2:02Real life Problem
5. 3:41Solution
6. 4:14Possibilities for Front End
7. 6:03Why Vue?
8. 7:08Learning Vue
9. 8:00Solution and details
10. 23:44Takeaways

" related talks

• 19mVue Storefront + Vendure = Fullstack Open Source EcommerceJakub Andrzejewski · Vue.js London Live 2021
• 30mImplementing an eCommerce online shop in no time using a boilerplate approachKristina Keil, Juan Garcia · code.talks 2022
• 40mHow Shopify Scales RailsJohn Duff · RailsConf 2013
• 25mScaling Vue in an existing stackRoman Kuba · Vue.js Amsterdam 2018
• 21mShifting to VueMichele Cynowicz · DevFest Florida 2019
• 23mEcommerce as easy as an UI componentRamona Schwering · Vuejs Amsterdam 2023
• 23mMaking eCommerce sexy again with Vue Storefront and Composition APIFilip Rakowski · Vue.js Amsterdam 2020
• 41mHow Shopify Scales RailsJohn Duff · Big Ruby 2013