Vue 3 Composition API in Shopify Themes
Vue 3's Composition API is a natural fit for Shopify theme integration because it encourages small, focused composables rather than monolithic components. In a Liquid-based theme, you mount Vue instances onto specific DOM nodes — a product form, a filtering sidebar, a mini-cart drawer — using createApp() targeted at elements that Liquid renders. Each composable encapsulates a single concern: useProduct() manages variant selection and availability, useCart() handles add-to-cart logic via the Ajax API, and useFilters() manages collection filtering state. Because these composables are just JavaScript functions using ref() and computed(), they are trivially testable outside the DOM. The Composition API also eliminates the Options API's tendency to scatter related logic across data, methods, and watch blocks, making Shopify-specific code much easier to reason about.
Mounting Vue Apps Within Liquid
The mounting pattern for Vue in a Shopify theme follows the island architecture: Liquid renders the structural HTML and SEO-critical content, and Vue takes over designated containers for interactivity. A typical approach uses Liquid to output a <div id="vue-product-form" data-product="{{ product | json | escape }}"> element. Your Vue entry script reads the data attribute, parses the product JSON, and mounts a reactive form component onto that node. This pattern preserves server-side rendering for search engines and first-paint speed while Vue handles dynamic behavior like variant switching, quantity updates, and real-time price calculations. The critical detail is configuring Vue's template compiler to use custom delimiters — app.config.compilerOptions.delimiters = ['${', '}'] — so that Vue's {{ }} syntax does not collide with Liquid's identical double-curly-brace syntax in any inline templates.
Shared State with Pinia
When multiple Vue islands need to share state — for example, a header cart icon showing the item count while the product form adds items — you need a centralized store. Pinia, Vue's official state management library, is lightweight and works seamlessly with the Composition API. You define a useCartStore() that holds the cart state, and every Vue island that imports it shares the same reactive instance. When the product form calls cartStore.addItem(), the header cart badge updates automatically because both components reference the same reactive state. The alternative — using custom events or a global event bus — becomes fragile as the number of islands grows. Pinia also supports plugins for persistence, so you can sync cart state with sessionStorage to survive page navigations in a traditional multi-page Shopify theme where each page load creates fresh Vue instances.
Bundle Size: Vue vs. React for Shopify
Bundle size is a decisive factor when adding a framework to a Shopify theme. Vue 3's core runtime is approximately 16 KB gzipped — roughly half of React plus ReactDOM. When you add Pinia for state management (around 1.5 KB), Vue's total framework cost sits under 18 KB, compared to React's 42+ KB before any state library. Vue also supports tree-shaking at the API level: if you do not use the Transition component or Teleport, they are excluded from the bundle. For Shopify themes where every kilobyte affects Lighthouse scores and mobile conversion, this difference matters. Vue's template compiler can also be excluded from production builds when you use Single File Components pre-compiled by Vite, further reducing the runtime footprint. React's advantage lies in its larger ecosystem and wider developer familiarity, but when the primary goal is reactive islands within an existing Liquid theme, Vue delivers more functionality per byte.
If you are considering Vue.js for your next Shopify theme or need help migrating interactive components from vanilla JavaScript to Vue, feel free to get in touch. I would love to help you build a reactive storefront that stays fast and maintainable.