How to build a Shopify theme using Vue.js from scratch
Step by step introduction
I was recently faced with a project that required me to build a custom theme. In the past, there was a few ways to do that. The most common one would be to build it on top of Slate. However, in early 2020, Shopify deprecated the use of Slate and I wanted to try something new, so I kept looking. I found a few starter theme github repos but none of them felt right. They are had complicated setups and were pretty much just Slate in disguise.
Then I came across a few tutorials where Vue.js was being used in small portions of Shopify themes. I have tried Vue.js in the past but never really built anything substantial with it, but it looked promising so I decided to give it a try.
With the theme I was building, I knew I need a custom dropdown selector for variants with multiple options and a responsive mini cart. Shopify’s solution to an option selector for custom themes is a nightmare. It involves confusing JavaScript logic and just doesn’t feel the way that modern web should. Here is the tutorial from Shopify if you’re interested: tutorial.
But Vue.js just felt right. Everything felt the way that modern web development should feel like. Here is how to do it:
