Building a Shopify Vue.js Theme from Scratch
How Vue.js is improving Shopify theme functionality
Shopify is by far the king of the ecommerce world. No other service can match the user and developer experience, hence the huge developer and merchant communities.
However, ever since I started working within the Shopify ecosystem I always thought that Shopify themes were the weakest link.
From a developer’s point of view, it looked like the multi-billion dollar behemoth was riding on the backs of slow and outdated storefronts.
This is where Vue.js comes in
Early in 2020, Shopify deprecated their support for Slate, and to me, that means it’s time for a new king to be crowned.
Using Vue.js in themes is not a new idea, but far from a popular one. There is little discussion within the community of relying on Vue.js to do the heavy lifting. Allow me to explain why it’s the best solution for right now.
1. Custom features, fast.
Since we can target a single element in the DOM using Vue.js, we can decide to only use it on a small portion of the website, for example the option selector.
We can easily create custom option selectors for improved user experience.
2. Easily contain Vue.js to a particular part of the theme
3. Manage your theme’s state
Easily create dynamic components that respond to the user input. Whether you want to make a blazing fast mini-cart or a persistent wishlist, Vue.js can make that happen without any Apps.
Check out this theme starter to see an example of a theme fully built with Vue.js: https://github.com/iskurbanov/Shopify-Vue-Theme-Full
Preview the theme here: https://buildvuetheme.com/
Learn to make it from scratch here: https://www.workingwithshopify.com/courses/build-an-advanced-shopify-theme-from-the-future