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:
Prerequisites
1. Create a Shopify Partners Account
2. Create a development store
This gives you unlimited time to work on your theme (when compared to the trial store)
3. Connect ThemeKit
This step is optional but again if modern web development is your goal, this is a must.
Step 1: Adding Vue.js
Add the Vue.js CDN package to the theme.liquid file.
Place the development version of the CDN inside the <head> element. Don’t forget to change it to the production version when you are done!
