Executive summary
- What: The Hydrogen developer preview adds Vue bindings, bundled GraphQL TypeScript tooling, analytics and consent through ShopifyScripts, Shopify Inbox support, and Suspense based cart reads in React.
- Why: It widens Hydrogen beyond React and moves analytics, consent and typing into the framework, which removes a layer of custom glue from headless builds.
- Who: Teams running or evaluating headless storefronts on Hydrogen, and anyone tracking breaking changes before the preview stabilizes.
What changed
The July 30 preview covers five additions. A new @shopify/hydrogen/vue entrypoint mirrors the React API with providers and composables for cart, products, collections and search, including the same typed factory pattern. GraphQL tooling now ships inside the package, so apps drop gql.tada and repeated schema paths from tsconfig in favor of a single plugin entry, with headless validation available through hydrogen gql check for CI.
Analytics and consent now bootstrap through ShopifyScripts. The analytics bus is inlined into the rendered HTML and lives at window.Shopify.analytics, so it is available before framework code hydrates. Consent starts in the same bootstrap and can use Shopify's privacy banner. Shopify Inbox is supported through a shopify-chat element, and React gains useSuspenseCart so cart content can stream in behind its own fallback while the app shell stays static and cacheable.
The breaking changes deserve equal attention. The shop option now requires myshopifyDomain. The analytics config needs an explicit channel and drops several fields Hydrogen resolves on its own. Private Storefront API calls now require buyerIp on the request context. createStorefrontAnalytics, canTrack and cookieDomain are gone. Variant matching now accounts for the full set of selected options, and its helper signature changed to a single object.
Why it matters
Two things stand out for enterprise teams. First, Vue support removes the framework lock that has kept Hydrogen off the shortlist for organizations with Vue or Nuxt capability in house. That is a real procurement consideration when the storefront team and the internal platform team do not share a stack.
Second, consent gating is stricter by default: analytics events now wait for consent status to resolve before firing. If you have been reconciling headless analytics gaps against privacy requirements, enforcement moves into the framework rather than your own wrapper. That is a net reduction in custom code, and worth factoring into any headless architecture assessment.
Role-specific impact
- Marketers: Expect analytics event timing to shift, since events now wait on consent resolution. Re-baseline dashboards after the upgrade rather than reading a dip as lost traffic.
- Developers: Budget for the breaking changes. Adding myshopifyDomain is trivial, but buyerIp on private token calls, the analytics config reshape, and the variant matching signature all need code changes and tests.
- Store admins: Confirm the Inbox app is installed with the Agent feature enabled and the sign-in requirement turned off if you want storefront chat, and verify privacy banner behavior matches your consent policy in each market.
Use-case example
Real-world scenario
A Plus merchant running a Hydrogen storefront with a Next.js app shell measures a first contentful paint penalty on collection pages because the cart is fetched before the shell renders. Moving to useSuspenseCart lets the shell stay static and CDN cacheable while the cart streams in, which on a comparable build removes roughly 200 to 400 ms of perceived load on cold cache mobile sessions. The same upgrade window is used to add buyerIp to private token calls, since the proxy now throws without it.
Implementation checklist
- Read the full release notes and list every breaking change that touches your codebase.
- Add myshopifyDomain to the shop option, and buyerIp to the request context on private Storefront API calls.
- Reshape the analytics config with an explicit channel and remove the fields Hydrogen now resolves itself.
- Replace createStorefrontAnalytics with trackCartAnalytics, or useCartAnalytics in React.
- Update variant matching calls to the single object signature and test option selection across products.
- Adopt the bundled TypeScript plugin, remove gql.tada, and wire the headless GraphQL check into CI.
- Validate consent behavior per market before release, since events now wait for consent to load.
FAQ
Q: Is the Vue entrypoint production ready?
A: This is a developer preview. The API surface mirrors React and looks stable in shape, but treat it as a candidate for prototyping and internal evaluation rather than a commitment for a peak season launch.
Q: Do we have to upgrade now?
A: No, but the breaking changes accumulate. Taking them in one planned window is cheaper than absorbing several preview releases at once later, particularly the analytics and consent rework.
Resources
Hydrogen developer preview documentation
Need guidance? Talk to Makro.