An existing theme modernised through a Vue 2 to Vue 3 migration, a move from Webpack to Vite/Rollup, and a new component loading strategy.
I handled the stack migration, build configuration, and changes to component loading and initialisation. I fixed compatibility issues in the existing code, created debugging tools, and prepared a guide for the team. I worked on one store. The changes were applied to the other themes without my involvement.
Optimise an existing Shopify theme built with Vue, update its stack, and resolve problems with component loading and initialisation.
The theme shared a foundation with several other stores belonging to the same client. The changes needed to be documented so the team could repeat the modernisation across the other projects.
I migrated:
The work included adapting existing code and fixing how data passed from Liquid to Vue components, as well as how those components were loaded and initialised.
In my measurements, the mobile PageSpeed Insights Performance score rose from 14 to 78 after the modernisation.
I wrote a detailed guide for repeating the migration and optimisation across the client's other themes that shared the same foundation.
My main contribution was updating the stack and build system, loading only the components each page needed, deferring initialisation, and preparing the team to apply the changes elsewhere.
I migrated:
The work included adapting existing code and fixing how data passed from Liquid to Vue components, as well as how those components were loaded and initialised.
I reworked JavaScript loading so each page received only the components present in its markup. The browser did not request files for the other components.
Individual parts of the theme had their own entry points, included through the corresponding Liquid sections. The code loaded by a page therefore reflected its actual content.
I separated loading files from creating Vue instances. Most components were initialised as they approached the viewport, using IntersectionObserver, so all initialisation work did not happen at once.
Components that needed to work regardless of visibility still started immediately, including the AJAX cart and quick add.
During the migration, I built temporary tools to inspect parameters passed through HTML, find nonstandard attributes, and track which Vue components had started.
These helped identify problems at the boundary between Liquid and Vue and check component integration after the stack update.
In my measurements, the mobile PageSpeed Insights Performance score rose from 14 to 78 after the modernisation. I wrote a detailed guide for repeating the migration and optimisation across the client's other themes that shared the same foundation. My main contribution was updating the stack and build system, loading only the components each page needed, deferring initialisation, and preparing the team to apply the changes elsewhere.
In my measurements, the mobile PageSpeed Insights Performance score rose from 14 to 78.
Have a project, a technical challenge, or a collaboration in mind? Send me a message.
