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.

Shopify themes lacked some flexibilities that are found in the modern web introduced through frameworks like React and Next.js. Vanilla JavaScript and jQuery was too difficult to read on a huge scale without any modularity and separation of concerns. The JavaScript files (usually known as theme.js or application.js) can often be upwards of 10,000 lines of code.

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

Using as little JavaScript as possible decreases load times, which are crucial for ecommerce.

Using Delimiters, we can inject Vue.js right beside Liquid, anywhere we want. This makes up for the missing modularity because you can easily find all the JavaScript responsible for that piece of the DOM.

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