@shopify/hydrogen 2026.4.5 → 2026.10.0-preview.2

package/dist/vue/product.d.mts

@@ -0,0 +1,57 @@
+import { CartLine } from "../core/cart/state.mjs";
+import { ProductInput, ProductVariantFrom } from "../core/product/state.mjs";
+import { ProductFormErrors, ProductFormOptions, ProductFormStore, ValidProductSelectionResult, VariantSelectionResult } from "../core/product/product-form.mjs";
+import { ProductFormRegister } from "../core/product/form.mjs";
+import { ShallowRef, defineComponent } from "vue";
+
+//#region src/vue/product.d.ts
+interface UseProductFormOptions<TProduct extends ProductInput> {
+  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;
+}
+interface UseProductFormResult<TProduct extends ProductInput> {
+  options: ProductFormOptions<TProduct>;
+  selectedVariant: ProductVariantFrom<TProduct> | null;
+  register: ProductFormRegister;
+  formProps: (opts?: {
+    beforeSubmit?: (e: Event) => void;
+    afterSubmit?: (e: Event) => void;
+  }) => Record<string, unknown>;
+  errors: ProductFormErrors;
+  matchedLineItem: CartLine | null;
+  pending: ShallowRef<boolean>;
+  selectOption: (name: string, value: string) => VariantSelectionResult<ProductVariantFrom<TProduct>>;
+}
+interface UseProductResult<TProduct extends ProductInput> {
+  options: ProductFormOptions<TProduct>;
+  selectedVariant: ProductVariantFrom<TProduct> | null;
+  selectOption: (name: string, value: string) => VariantSelectionResult<ProductVariantFrom<TProduct>>;
+  errors: ProductFormErrors;
+  matchedLineItem: CartLine | null;
+}
+/**
+ * Subscribes to a {@link ProductFormStore} and returns form-ready state.
+ *
+ * This is a pure subscription composable — it does **not** manage store
+ * lifecycle. Create the store with `createProductFormStore` and manage its
+ * lifecycle (hydration, destruction) yourself, or use
+ * `createProductComponents` for a provider-based approach.
+ */
+declare function useProductForm<TProduct extends ProductInput>(store: ProductFormStore<TProduct>, options?: UseProductFormOptions<TProduct>): UseProductFormResult<TProduct>;
+/**
+ * Creates a typed set of product components bound to a specific product type.
+ *
+ * Returns `{ ProductProvider, useProduct, useProductForm }` where:
+ * - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)
+ * - `useProduct` provides read-only state and variant selection
+ * - `useProductForm` provides form-binding utilities (register, formProps, pending)
+ *
+ * Requires a `<CartProvider>` ancestor.
+ */
+declare function createProductComponents<TProduct extends ProductInput>(): {
+  ProductProvider: ReturnType<typeof defineComponent>;
+  useProduct: () => UseProductResult<TProduct>;
+  useProductForm: () => UseProductFormResult<TProduct>;
+};
+//#endregion
+export { UseProductFormOptions, UseProductFormResult, UseProductResult, createProductComponents, useProductForm };
+//# sourceMappingURL=product.d.mts.map

package/dist/vue/product.mjs

@@ -0,0 +1,167 @@
+import { getLogger } from "../core/logging/logging.mjs";
+import { createProductFormStore } from "../core/product/product-form.mjs";
+import { createProductFormRegister } from "../core/product/form.mjs";
+import { getCartEndpoint, useCartStore } from "./cart.mjs";
+import { defineComponent, inject, onScopeDispose, onUnmounted, provide, shallowRef, watch } from "vue";
+
+//#region src/vue/product.ts
+const log = getLogger("product");
+/**
+* Shared implementation backing both the standalone composable and the factory
+* composable. Accepts a `getOnSelect` getter so the factory version can always
+* read the latest provider prop, while the standalone version captures the
+* caller's callback at setup time.
+*/
+function useProductFormImpl(store, getOnSelect) {
+	const state = shallowRef(store.getState());
+	const pending = shallowRef(false);
+	onScopeDispose(store.subscribe(() => {
+		state.value = store.getState();
+	}));
+	function selectOption(name, value) {
+		const result = store.selectOption(name, value);
+		if (result.status !== "invalid") getOnSelect()?.(result);
+		return result;
+	}
+	function formProps(opts) {
+		return {
+			onSubmit: (e) => {
+				opts?.beforeSubmit?.(e);
+				if (e.defaultPrevented) return;
+				e.preventDefault();
+				pending.value = true;
+				store.handleFormSubmit(e).then(() => opts?.afterSubmit?.(e), (error) => {
+					log.error("form submission error", { error });
+				}).finally(() => {
+					pending.value = false;
+				});
+			},
+			method: "post",
+			action: getCartEndpoint()
+		};
+	}
+	return {
+		get options() {
+			return state.value.options;
+		},
+		get selectedVariant() {
+			return state.value.selectedVariant;
+		},
+		get register() {
+			return createProductFormRegister(state.value.selectedVariant, selectOption);
+		},
+		formProps,
+		get errors() {
+			return state.value.errors;
+		},
+		get matchedLineItem() {
+			return state.value.matchedLineItem;
+		},
+		pending,
+		selectOption
+	};
+}
+/**
+* Subscribes to a {@link ProductFormStore} and returns form-ready state.
+*
+* This is a pure subscription composable — it does **not** manage store
+* lifecycle. Create the store with `createProductFormStore` and manage its
+* lifecycle (hydration, destruction) yourself, or use
+* `createProductComponents` for a provider-based approach.
+*/
+function useProductForm(store, options) {
+	const onSelect = options?.onSelect;
+	return useProductFormImpl(store, () => onSelect);
+}
+/**
+* Creates a typed set of product components bound to a specific product type.
+*
+* Returns `{ ProductProvider, useProduct, useProductForm }` where:
+* - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)
+* - `useProduct` provides read-only state and variant selection
+* - `useProductForm` provides form-binding utilities (register, formProps, pending)
+*
+* Requires a `<CartProvider>` ancestor.
+*/
+function createProductComponents() {
+	const ProductStoreKey = Symbol("ProductFormStore");
+	function useProductContext(composableName) {
+		const ctx = inject(ProductStoreKey);
+		if (!ctx) throw new Error(`${composableName} must be used inside a <ProductProvider>. Wrap your component tree with the ProductProvider from createProductComponents(), or use the standalone useProductForm(store) composable instead.`);
+		return ctx;
+	}
+	const ProductProvider = defineComponent({
+		name: "ProductProvider",
+		props: {
+			product: {
+				type: Object,
+				required: true
+			},
+			onSelect: {
+				type: Function,
+				default: void 0
+			}
+		},
+		setup(props, { slots }) {
+			const product = props.product;
+			const store = createProductFormStore(product, useCartStore());
+			provide(ProductStoreKey, {
+				store,
+				getOnSelect: () => props.onSelect
+			});
+			let mounted = false;
+			watch(() => {
+				const p = props.product;
+				return `${p.id}:${p.selectedOrFirstAvailableVariant?.id ?? ""}`;
+			}, () => {
+				if (!mounted) {
+					mounted = true;
+					return;
+				}
+				store.hydrate(props.product);
+			}, { immediate: true });
+			onUnmounted(() => store.destroy());
+			return () => slots.default?.();
+		}
+	});
+	function useProduct() {
+		const ctx = useProductContext("useProduct");
+		const state = shallowRef(ctx.store.getState());
+		onScopeDispose(ctx.store.subscribe(() => {
+			state.value = ctx.store.getState();
+		}));
+		function selectOption(name, value) {
+			const result = ctx.store.selectOption(name, value);
+			if (result.status !== "invalid") ctx.getOnSelect()?.(result);
+			return result;
+		}
+		return {
+			get options() {
+				return state.value.options;
+			},
+			get selectedVariant() {
+				return state.value.selectedVariant;
+			},
+			selectOption,
+			get errors() {
+				return state.value.errors;
+			},
+			get matchedLineItem() {
+				return state.value.matchedLineItem;
+			}
+		};
+	}
+	function useProductFormHook() {
+		const ctx = useProductContext("useProductForm");
+		return useProductFormImpl(ctx.store, ctx.getOnSelect);
+	}
+	return {
+		ProductProvider,
+		useProduct,
+		useProductForm: useProductFormHook
+	};
+}
+
+//#endregion
+export { createProductComponents, useProductForm };
+//# sourceMappingURL=product.mjs.map

package/dist/vue/product.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"product.mjs","names":[],"sources":["../../src/vue/product.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport type { CartLine } from \"../core/cart/state\";\nimport { getLogger } from \"../core/logging\";\nimport {\n  createProductFormRegister,\n  createProductFormStore,\n  type ProductFormErrors,\n  type ProductFormOptions,\n  type ProductFormRegister,\n  type ProductFormStore,\n  type ProductInput,\n  type ProductVariantFrom,\n  type ValidProductSelectionResult,\n  type VariantSelectionResult,\n} from \"../core/product\";\nimport { getCartEndpoint, useCartStore } from \"./cart\";\n\nconst log = getLogger(\"product\");\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type { ValidProductSelectionResult } from \"../core/product\";\n\nexport interface UseProductFormOptions<TProduct extends ProductInput> {\n  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;\n}\n\nexport interface UseProductFormResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  register: ProductFormRegister;\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }) => Record<string, unknown>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n  pending: ShallowRef<boolean>;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n}\n\nexport interface UseProductResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\ninterface ProductContextValue<TProduct extends ProductInput> {\n  store: ProductFormStore<TProduct>;\n  getOnSelect: () => ((result: ValidProductSelectionResult<TProduct>) => void) | undefined;\n}\n\n/**\n * Shared implementation backing both the standalone composable and the factory\n * composable. Accepts a `getOnSelect` getter so the factory version can always\n * read the latest provider prop, while the standalone version captures the\n * caller's callback at setup time.\n */\nfunction useProductFormImpl<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  getOnSelect: () => ((result: ValidProductSelectionResult<TProduct>) => void) | undefined,\n): UseProductFormResult<TProduct> {\n  const state = shallowRef(store.getState());\n  const pending = shallowRef(false);\n\n  const unsubscribe = store.subscribe(() => {\n    state.value = store.getState();\n  });\n  onScopeDispose(unsubscribe);\n\n  function selectOption(\n    name: string,\n    value: string,\n  ): VariantSelectionResult<ProductVariantFrom<TProduct>> {\n    const result = store.selectOption(name, value);\n    if (result.status !== \"invalid\") {\n      getOnSelect()?.(result);\n    }\n    return result;\n  }\n\n  function formProps(opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> {\n    return {\n      onSubmit: (e: Event) => {\n        opts?.beforeSubmit?.(e);\n        if (e.defaultPrevented) return;\n        e.preventDefault();\n        pending.value = true;\n        store\n          .handleFormSubmit(e as SubmitEvent)\n          .then(\n            () => opts?.afterSubmit?.(e),\n            (error: unknown) => {\n              log.error(\"form submission error\", { error });\n            },\n          )\n          .finally(() => {\n            pending.value = false;\n          });\n      },\n      method: \"post\",\n      action: getCartEndpoint(),\n    };\n  }\n\n  return {\n    get options() {\n      return state.value.options;\n    },\n    get selectedVariant() {\n      return state.value.selectedVariant;\n    },\n    get register() {\n      return createProductFormRegister(state.value.selectedVariant, selectOption);\n    },\n    formProps,\n    get errors() {\n      return state.value.errors;\n    },\n    get matchedLineItem() {\n      return state.value.matchedLineItem;\n    },\n    pending,\n    selectOption,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Standalone composable\n// ---------------------------------------------------------------------------\n\n/**\n * Subscribes to a {@link ProductFormStore} and returns form-ready state.\n *\n * This is a pure subscription composable — it does **not** manage store\n * lifecycle. Create the store with `createProductFormStore` and manage its\n * lifecycle (hydration, destruction) yourself, or use\n * `createProductComponents` for a provider-based approach.\n */\nexport function useProductForm<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  options?: UseProductFormOptions<TProduct>,\n): UseProductFormResult<TProduct> {\n  const onSelect = options?.onSelect;\n  return useProductFormImpl(store, () => onSelect);\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\n/**\n * Creates a typed set of product components bound to a specific product type.\n *\n * Returns `{ ProductProvider, useProduct, useProductForm }` where:\n * - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)\n * - `useProduct` provides read-only state and variant selection\n * - `useProductForm` provides form-binding utilities (register, formProps, pending)\n *\n * Requires a `<CartProvider>` ancestor.\n */\nexport function createProductComponents<TProduct extends ProductInput>(): {\n  ProductProvider: ReturnType<typeof defineComponent>;\n  useProduct: () => UseProductResult<TProduct>;\n  useProductForm: () => UseProductFormResult<TProduct>;\n} {\n  const ProductStoreKey: InjectionKey<ProductContextValue<TProduct>> = Symbol(\"ProductFormStore\");\n\n  function useProductContext(composableName: string): ProductContextValue<TProduct> {\n    const ctx = inject(ProductStoreKey);\n    if (!ctx) {\n      throw new Error(\n        `${composableName} must be used inside a <ProductProvider>. ` +\n          \"Wrap your component tree with the ProductProvider from createProductComponents(), \" +\n          \"or use the standalone useProductForm(store) composable instead.\",\n      );\n    }\n    return ctx;\n  }\n\n  const ProductProvider = defineComponent({\n    name: \"ProductProvider\",\n    props: {\n      product: {\n        type: Object as PropType<TProduct>,\n        required: true,\n      },\n      onSelect: {\n        type: Function as PropType<(result: ValidProductSelectionResult<TProduct>) => void>,\n        default: undefined,\n      },\n    },\n    setup(props, { slots }) {\n      const product = props.product as TProduct;\n      const cartStore = useCartStore();\n      const store = createProductFormStore<TProduct>(product, cartStore);\n\n      provide(ProductStoreKey, {\n        store,\n        getOnSelect: () =>\n          props.onSelect as ((result: ValidProductSelectionResult<TProduct>) => void) | undefined,\n      });\n\n      let mounted = false;\n      watch(\n        () => {\n          const p = props.product as TProduct;\n          return `${p.id}:${p.selectedOrFirstAvailableVariant?.id ?? \"\"}`;\n        },\n        () => {\n          if (!mounted) {\n            mounted = true;\n            return;\n          }\n          store.hydrate(props.product as TProduct);\n        },\n        { immediate: true },\n      );\n\n      onUnmounted(() => store.destroy());\n\n      return () => slots.default?.();\n    },\n  });\n\n  function useProduct(): UseProductResult<TProduct> {\n    const ctx = useProductContext(\"useProduct\");\n    const state = shallowRef(ctx.store.getState());\n\n    const unsubscribe = ctx.store.subscribe(() => {\n      state.value = ctx.store.getState();\n    });\n    onScopeDispose(unsubscribe);\n\n    function selectOption(\n      name: string,\n      value: string,\n    ): VariantSelectionResult<ProductVariantFrom<TProduct>> {\n      const result = ctx.store.selectOption(name, value);\n      if (result.status !== \"invalid\") {\n        ctx.getOnSelect()?.(result);\n      }\n      return result;\n    }\n\n    return {\n      get options() {\n        return state.value.options;\n      },\n      get selectedVariant() {\n        return state.value.selectedVariant;\n      },\n      selectOption,\n      get errors() {\n        return state.value.errors;\n      },\n      get matchedLineItem() {\n        return state.value.matchedLineItem;\n      },\n    };\n  }\n\n  function useProductFormHook(): UseProductFormResult<TProduct> {\n    const ctx = useProductContext(\"useProductForm\");\n    return useProductFormImpl(ctx.store, ctx.getOnSelect);\n  }\n\n  return {\n    ProductProvider,\n    useProduct,\n    useProductForm: useProductFormHook,\n  };\n}\n"],"mappings":"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"}

package/dist/vue/shop-pay.d.mts

@@ -0,0 +1,25 @@
+import { ShopPayButtonOptions } from "../core/shop-pay/shop-pay.mjs";
+import * as _$vue from "vue";
+
+//#region src/vue/shop-pay.d.ts
+type ShopPayButtonProps = ShopPayButtonOptions;
+declare const ShopPayButton: _$vue.DefineSetupFnComponent<ShopPayButtonOptions, {}, {}, {
+  checkoutUrl?: string;
+  paymentOption?: "shop_pay" | "shop_pay_installments";
+  source?: string;
+  sourceToken?: string;
+  nonce?: string;
+  channel?: "headless" | "hydrogen";
+  disabled?: boolean;
+  width?: string;
+  borderRadius?: string;
+  accessibilityLabel?: string;
+} & {
+  variants?: readonly string[] | readonly {
+    id: string;
+    quantity?: number;
+  }[];
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { ShopPayButton, ShopPayButtonProps };
+//# sourceMappingURL=shop-pay.d.mts.map

package/dist/vue/shop-pay.mjs

@@ -0,0 +1,35 @@
+import { SHOP_PAY_BUTTON_TAG_NAME, defineShopPayButton, getShopPayButtonDeclarativeShadowDomHtml, getShopPayButtonElementAttributes } from "../core/shop-pay/shop-pay.mjs";
+import { defineComponent, h } from "vue";
+
+//#region src/vue/shop-pay.ts
+const canUseDom = typeof document !== "undefined";
+defineShopPayButton();
+const ShopPayButton = defineComponent((props) => {
+	return () => {
+		const attributes = getShopPayButtonElementAttributes(props);
+		return canUseDom ? h(SHOP_PAY_BUTTON_TAG_NAME, attributes) : h(SHOP_PAY_BUTTON_TAG_NAME, {
+			...attributes,
+			innerHTML: getShopPayButtonDeclarativeShadowDomHtml(props)
+		});
+	};
+}, {
+	name: "ShopPayButton",
+	inheritAttrs: false,
+	props: {
+		variants: null,
+		channel: null,
+		checkoutUrl: String,
+		paymentOption: null,
+		source: String,
+		sourceToken: String,
+		nonce: String,
+		disabled: Boolean,
+		width: String,
+		borderRadius: String,
+		accessibilityLabel: String
+	}
+});
+
+//#endregion
+export { ShopPayButton };
+//# sourceMappingURL=shop-pay.mjs.map

package/dist/vue/shop-pay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shop-pay.mjs","names":[],"sources":["../../src/vue/shop-pay.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\n\nimport {\n  defineShopPayButton,\n  getShopPayButtonDeclarativeShadowDomHtml,\n  getShopPayButtonElementAttributes,\n  SHOP_PAY_BUTTON_TAG_NAME,\n  type ShopPayButtonOptions,\n} from \"../core/shop-pay/shop-pay\";\n\nexport type ShopPayButtonProps = ShopPayButtonOptions;\n\ntype CompletePropOptions<T> = {\n  [K in keyof T]-?: unknown;\n};\n\nconst canUseDom = typeof document !== \"undefined\";\ndefineShopPayButton();\n\nexport const ShopPayButton = defineComponent(\n  (props: ShopPayButtonProps) => {\n    return () => {\n      const attributes = getShopPayButtonElementAttributes(props);\n      return canUseDom\n        ? h(SHOP_PAY_BUTTON_TAG_NAME, attributes)\n        : h(SHOP_PAY_BUTTON_TAG_NAME, {\n            ...attributes,\n            innerHTML: getShopPayButtonDeclarativeShadowDomHtml(props),\n          });\n    };\n  },\n  {\n    name: \"ShopPayButton\",\n    inheritAttrs: false,\n    props: {\n      variants: null,\n      channel: null,\n      checkoutUrl: String,\n      paymentOption: null,\n      source: String,\n      sourceToken: String,\n      nonce: String,\n      disabled: Boolean,\n      width: String,\n      borderRadius: String,\n      accessibilityLabel: String,\n    } satisfies CompletePropOptions<ShopPayButtonProps>,\n  },\n);\n"],"mappings":";;;;AAgBA,MAAM,YAAY,OAAO,aAAa;AACtC,qBAAqB;AAErB,MAAa,gBAAgB,iBAC1B,UAA8B;AAC7B,cAAa;EACX,MAAM,aAAa,kCAAkC,MAAM;AAC3D,SAAO,YACH,EAAE,0BAA0B,WAAW,GACvC,EAAE,0BAA0B;GAC1B,GAAG;GACH,WAAW,yCAAyC,MAAM;GAC3D,CAAC;;GAGV;CACE,MAAM;CACN,cAAc;CACd,OAAO;EACL,UAAU;EACV,SAAS;EACT,aAAa;EACb,eAAe;EACf,QAAQ;EACR,aAAa;EACb,OAAO;EACP,UAAU;EACV,OAAO;EACP,cAAc;EACd,oBAAoB;EACrB;CACF,CACF"}

package/dist/vue/shopify-scripts.d.mts

@@ -0,0 +1,127 @@
+import { ShopifyRoutesOptions, ShopifyScriptTagsOptions, ShopifyScriptsAnalyticsConfig, ShopifyScriptsI18n, ShopifyScriptsShop } from "../core/shopify-scripts/types.mjs";
+import { ConsentConfig } from "../core/analytics/types.mjs";
+import * as _$vue from "vue";
+
+//#region src/vue/shopify-scripts.d.ts
+type ShopifyScriptsProps = ShopifyScriptTagsOptions & {
+  navigate?: ShopifyRoutesOptions["navigate"];
+  routes?: ShopifyRoutesOptions["routes"];
+  webMcp?: boolean;
+};
+declare const ShopifyScripts: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  i18n: {
+    type: () => ShopifyScriptsI18n;
+    default: undefined;
+  };
+  nonce: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  routes: {
+    type: null;
+    default: undefined;
+  };
+  navigate: {
+    type: null;
+    default: undefined;
+  };
+  consent: {
+    type: (new (...args: any[]) => ConsentConfig) | (() => ConsentConfig | undefined);
+    default: undefined;
+  };
+  analytics: {
+    type: (new (...args: any[]) => ShopifyScriptsAnalyticsConfig) | (() => ShopifyScriptsAnalyticsConfig | undefined);
+    default: undefined;
+  };
+  debug: {
+    type: (new (...args: any[]) => {
+      standardEventsInspector?: boolean;
+    }) | (() => {
+      standardEventsInspector?: boolean;
+    } | undefined);
+    default: undefined;
+  };
+  webMcp: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  inbox: {
+    type: () => boolean | undefined;
+    default: undefined;
+  };
+  shopifyAnalytics: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  shop: {
+    type: () => ShopifyScriptsShop;
+    required: true;
+  };
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}>[], {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  i18n: {
+    type: () => ShopifyScriptsI18n;
+    default: undefined;
+  };
+  nonce: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  routes: {
+    type: null;
+    default: undefined;
+  };
+  navigate: {
+    type: null;
+    default: undefined;
+  };
+  consent: {
+    type: (new (...args: any[]) => ConsentConfig) | (() => ConsentConfig | undefined);
+    default: undefined;
+  };
+  analytics: {
+    type: (new (...args: any[]) => ShopifyScriptsAnalyticsConfig) | (() => ShopifyScriptsAnalyticsConfig | undefined);
+    default: undefined;
+  };
+  debug: {
+    type: (new (...args: any[]) => {
+      standardEventsInspector?: boolean;
+    }) | (() => {
+      standardEventsInspector?: boolean;
+    } | undefined);
+    default: undefined;
+  };
+  webMcp: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  inbox: {
+    type: () => boolean | undefined;
+    default: undefined;
+  };
+  shopifyAnalytics: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  shop: {
+    type: () => ShopifyScriptsShop;
+    required: true;
+  };
+}>> & Readonly<{}>, {
+  analytics: ShopifyScriptsAnalyticsConfig | undefined;
+  consent: ConsentConfig | undefined;
+  debug: {
+    standardEventsInspector?: boolean;
+  } | undefined;
+  i18n: ShopifyScriptsI18n;
+  inbox: boolean | undefined;
+  nonce: string;
+  shopifyAnalytics: boolean;
+  navigate: any;
+  routes: any;
+  webMcp: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ShopifyScripts, ShopifyScriptsProps };
+//# sourceMappingURL=shopify-scripts.d.mts.map

package/dist/vue/shopify-scripts.mjs

@@ -0,0 +1,79 @@
+import { initializeShopifyScripts } from "../core/shopify-scripts/initialize.mjs";
+import { getShopifyScriptTags } from "../core/shopify-scripts/index.mjs";
+import { defineComponent, h, onMounted } from "vue";
+
+//#region src/vue/shopify-scripts.ts
+const i18nProp = Object;
+const navigateProp = null;
+const routesProp = null;
+const shopProp = Object;
+const consentProp = Object;
+const analyticsProp = Object;
+const debugProp = Object;
+const inboxProp = Boolean;
+const ShopifyScripts = defineComponent({
+	name: "ShopifyScripts",
+	props: {
+		i18n: {
+			type: i18nProp,
+			default: void 0
+		},
+		nonce: {
+			type: String,
+			default: void 0
+		},
+		routes: {
+			type: routesProp,
+			default: void 0
+		},
+		navigate: {
+			type: navigateProp,
+			default: void 0
+		},
+		consent: {
+			type: consentProp,
+			default: void 0
+		},
+		analytics: {
+			type: analyticsProp,
+			default: void 0
+		},
+		debug: {
+			type: debugProp,
+			default: void 0
+		},
+		webMcp: {
+			type: Boolean,
+			default: void 0
+		},
+		inbox: {
+			type: inboxProp,
+			default: void 0
+		},
+		shopifyAnalytics: {
+			type: Boolean,
+			default: void 0
+		},
+		shop: {
+			type: shopProp,
+			required: true
+		}
+	},
+	setup(props) {
+		onMounted(() => {
+			initializeShopifyScripts({
+				navigate: props.navigate,
+				routes: props.routes,
+				webMcp: props.webMcp !== false
+			});
+		});
+		return () => getShopifyScriptTags(props).tags.map(({ tagName, attributes, innerHTML }) => h(tagName, {
+			...attributes,
+			...innerHTML ? { innerHTML } : {}
+		}));
+	}
+});
+
+//#endregion
+export { ShopifyScripts };
+//# sourceMappingURL=shopify-scripts.mjs.map

package/dist/vue/shopify-scripts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shopify-scripts.mjs","names":[],"sources":["../../src/vue/shopify-scripts.ts"],"sourcesContent":["import { defineComponent, h, onMounted, type PropType } from \"vue\";\n\nimport {\n  getShopifyScriptTags,\n  initializeShopifyScripts,\n  type ShopifyScriptsShop,\n  type ShopifyScriptsI18n,\n  type ShopifyScriptTagsOptions,\n  type ShopifyRoutesOptions,\n} from \"../core/shopify-scripts/index\";\n\nexport type ShopifyScriptsProps = ShopifyScriptTagsOptions & {\n  navigate?: ShopifyRoutesOptions[\"navigate\"];\n  routes?: ShopifyRoutesOptions[\"routes\"];\n  webMcp?: boolean;\n};\n\ntype CompletePropOptions<T> = {\n  [K in keyof T]-?: unknown;\n};\n\nconst i18nProp: PropType<ShopifyScriptsI18n> = Object;\nconst navigateProp: PropType<NonNullable<ShopifyRoutesOptions[\"navigate\"]>> | null = null;\nconst routesProp: PropType<NonNullable<ShopifyRoutesOptions[\"routes\"]>> | null = null;\nconst shopProp: PropType<ShopifyScriptsShop> = Object;\nconst consentProp: PropType<ShopifyScriptTagsOptions[\"consent\"]> = Object;\nconst analyticsProp: PropType<ShopifyScriptTagsOptions[\"analytics\"]> = Object;\nconst debugProp: PropType<ShopifyScriptTagsOptions[\"debug\"]> = Object;\nconst inboxProp: PropType<ShopifyScriptTagsOptions[\"inbox\"]> = Boolean;\n\nexport const ShopifyScripts = defineComponent({\n  name: \"ShopifyScripts\",\n  props: {\n    i18n: {\n      type: i18nProp,\n      default: undefined,\n    },\n    nonce: {\n      type: String,\n      default: undefined,\n    },\n    routes: {\n      type: routesProp,\n      default: undefined,\n    },\n    navigate: {\n      type: navigateProp,\n      default: undefined,\n    },\n    consent: {\n      type: consentProp,\n      default: undefined,\n    },\n    analytics: {\n      type: analyticsProp,\n      default: undefined,\n    },\n    debug: {\n      type: debugProp,\n      default: undefined,\n    },\n    webMcp: {\n      type: Boolean,\n      default: undefined,\n    },\n    inbox: {\n      type: inboxProp,\n      default: undefined,\n    },\n    shopifyAnalytics: {\n      type: Boolean,\n      default: undefined,\n    },\n    shop: {\n      type: shopProp,\n      required: true as const,\n    },\n  } satisfies CompletePropOptions<ShopifyScriptsProps>,\n  setup(props) {\n    onMounted(() => {\n      void initializeShopifyScripts({\n        navigate: props.navigate,\n        routes: props.routes,\n        webMcp: props.webMcp !== false,\n      });\n    });\n\n    return () =>\n      getShopifyScriptTags(props).tags.map(({ tagName, attributes, innerHTML }) =>\n        h(tagName, {\n          ...attributes,\n          ...(innerHTML ? { innerHTML } : {}),\n        }),\n      );\n  },\n});\n"],"mappings":";;;;;AAqBA,MAAM,WAAyC;AAC/C,MAAM,eAA+E;AACrF,MAAM,aAA2E;AACjF,MAAM,WAAyC;AAC/C,MAAM,cAA6D;AACnE,MAAM,gBAAiE;AACvE,MAAM,YAAyD;AAC/D,MAAM,YAAyD;AAE/D,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;EACL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CACD,MAAM,OAAO;AACX,kBAAgB;AACd,GAAK,yBAAyB;IAC5B,UAAU,MAAM;IAChB,QAAQ,MAAM;IACd,QAAQ,MAAM,WAAW;IAC1B,CAAC;IACF;AAEF,eACE,qBAAqB,MAAM,CAAC,KAAK,KAAK,EAAE,SAAS,YAAY,gBAC3D,EAAE,SAAS;GACT,GAAG;GACH,GAAI,YAAY,EAAE,WAAW,GAAG,EAAE;GACnC,CAAC,CACH;;CAEN,CAAC"}