shopify-nuxt 0.0.10 → 0.0.12

package/README.md

@@ -6,7 +6,9 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)
 [![npm version](https://badge.fury.io/js/shopify-nuxt.svg)](https://badge.fury.io/js/shopify-nuxt)
+[![NPM Downloads](https://img.shields.io/npm/dm/shopify-nuxt)](https://npmtrends.com/shopify-nuxt)
 [![Nuxt](https://img.shields.io/badge/Nuxt-020420?logo=nuxt)](https://nuxt.com)
+[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/shopify-nuxt.svg)](https://img.shields.io/bundlephobia/minzip/shopify-nuxt.svg)
 
 This package makes it easy to use [Nuxt](https://nuxt.com/) to build Shopify apps.
 
@@ -281,21 +283,36 @@ const shop = shopify.config.shop
 
 ### Authenticated fetch
 
-Use `useShopifyFetch()` for client-side API calls that automatically include the session token:
+Use `useShopifyFetch()` for API calls that automatically include the Shopify session token. It works on both client and server — on the client it fetches a session token via App Bridge, on the server it forwards the incoming `Authorization` header.
 
 ```vue
 <script setup>
-const shopifyFetch = useShopifyFetch()
+const { data: shop } = await useAsyncData(
+  'shop',
+  () => useShopifyFetch('/api/shop'),
+  { server: false }
+)
+</script>
+```
 
-const { data: products } = await useAsyncData(
-  'products',
-  () => shopifyFetch('/api/products'),
+With generic types for full type safety:
+
+```vue
+<script setup lang="ts">
+interface ShopData {
+  shop: { name: string; currencyCode: string }
+}
+
+const { data } = await useAsyncData(
+  'shop',
+  () => useShopifyFetch<ShopData>('/api/shop'),
   { server: false }
 )
+// data.value.data.shop.name is fully typed
 </script>
 ```
 
-> **Important**: Always use `server: false` with `useShopifyFetch()` — session tokens are only available on the client side within the Shopify admin iframe.
+> **Important**: Always use `server: false` with `useShopifyFetch()` in `useAsyncData` — session tokens are only available on the client side within the Shopify admin iframe.
 
 ## Using Polaris components
 
@@ -391,6 +408,10 @@ Content: `ShText`, `ShHeading`, `ShParagraph`, `ShIcon`, `ShImage`, `ShThumbnail
 
 Other: `ShModal`, `ShQueryContainer`
 
+App Bridge UI: `ShUiModal`, `ShUiTitleBar`, `ShUiSaveBar`, `ShUiNavMenu`
+
+Loading: `ShLoadingIndicator`
+
 ### Using `ShModal`
 
 `ShModal` wraps the [Polaris `<s-modal>`](https://shopify.dev/docs/api/app-home/web-components/overlays/modal) component — it renders **inside** your app's iframe. Open and close it using `commandFor` / `command` attributes:
@@ -417,7 +438,142 @@ Other: `ShModal`, `ShQueryContainer`
 </template>
 ```
 
-> **Note**: `ShModal` is **not** the same as the [App Bridge `<ui-modal>`](https://shopify.dev/docs/api/app-bridge-library/apis/modal) which renders outside the iframe and is controlled via `shopify.modal.show(id)`. If you need the App Bridge modal, use `<ui-modal>` directly.
+> **Note**: `ShModal` is **not** the same as the [App Bridge `<ui-modal>`](https://shopify.dev/docs/api/app-bridge-library/apis/modal) which renders outside the iframe and is controlled via `shopify.modal.show(id)`. If you need the App Bridge modal, use `<ShUiModal>` (see below).
+
+### App Bridge UI components
+
+In addition to the Polaris `Sh*` components (which wrap `s-*` web components rendered **inside** your app's iframe), this module also provides Vue wrappers for [App Bridge UI web components](https://shopify.dev/docs/api/app-bridge-library/web-components) (`ui-*`). These render **outside** the app iframe in the Shopify Admin shell.
+
+#### Polaris (`Sh*`) vs App Bridge (`ShUi*`) — what's the difference?
+
+|                    | Polaris (`Sh*`)                           | App Bridge (`ShUi*`)                                                              |
+| ------------------ | ----------------------------------------- | --------------------------------------------------------------------------------- |
+| **HTML elements**  | `<s-button>`, `<s-modal>`, etc.           | `<ui-modal>`, `<ui-title-bar>`, etc.                                              |
+| **Renders in**     | Your app's iframe                         | Shopify Admin (outside the iframe)                                                |
+| **Use for**        | In-app UI: forms, tables, buttons, layout | Admin-level chrome: page title, modals overlaying the admin, save bar, navigation |
+| **Controlled via** | Props, slots, `command`/`commandFor`      | Props, template refs, `shopify.modal.show(id)`                                    |
+
+#### `<ShUiModal>`
+
+Wraps [`<ui-modal>`](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal) — renders a full-screen overlay **outside** the iframe, managed by Shopify Admin.
+
+```vue
+<script setup>
+const modalRef = ref()
+</script>
+
+<template>
+  <ShButton @click="modalRef.show()">Open Modal</ShButton>
+
+  <ShUiModal ref="modalRef" id="my-modal" variant="large" @hide="onClose">
+    <p>This content renders outside the iframe.</p>
+
+    <template #title-bar>
+      <ShUiTitleBar title="Edit Product">
+        <button variant="primary" onclick="handleSave()">Save</button>
+        <button onclick="document.getElementById('my-modal').hide()">
+          Cancel
+        </button>
+      </ShUiTitleBar>
+    </template>
+  </ShUiModal>
+</template>
+```
+
+| Prop      | Type                                    | Default  | Description                                            |
+| --------- | --------------------------------------- | -------- | ------------------------------------------------------ |
+| `id`      | `string`                                | —        | Unique identifier (used with `shopify.modal.show(id)`) |
+| `variant` | `'small' \| 'base' \| 'large' \| 'max'` | `'base'` | Modal size                                             |
+| `src`     | `string`                                | —        | URL to load in an iframe inside the modal              |
+
+| Event  | Description                   |
+| ------ | ----------------------------- |
+| `show` | Emitted when the modal opens  |
+| `hide` | Emitted when the modal closes |
+
+Exposed methods via template ref: `show()`, `hide()`, `toggle()`
+
+#### `<ShUiTitleBar>`
+
+Wraps [`<ui-title-bar>`](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar) — sets the page title and action buttons in the Shopify Admin title bar.
+
+```vue
+<template>
+  <ShUiTitleBar title="Products">
+    <button variant="primary" onclick="createProduct()">Create product</button>
+    <button onclick="exportProducts()">Export</button>
+  </ShUiTitleBar>
+</template>
+```
+
+| Prop    | Type     | Description                                |
+| ------- | -------- | ------------------------------------------ |
+| `title` | `string` | The title displayed in the Admin title bar |
+
+Child elements: `<button>` (with optional `variant="primary"` and `tone="critical"`), `<a>` (with optional `variant="breadcrumb"`), and `<section>` groups.
+
+#### `<ShUiSaveBar>`
+
+Wraps [`<ui-save-bar>`](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar) — shows a contextual save bar at the top of the Admin when there are unsaved changes.
+
+```vue
+<script setup>
+const saveBarRef = ref()
+
+function onFormChange() {
+  saveBarRef.value.show()
+}
+</script>
+
+<template>
+  <ShUiSaveBar ref="saveBarRef" id="my-save-bar" discard-confirmation>
+    <button variant="primary" onclick="handleSave()">Save</button>
+    <button onclick="handleDiscard()">Discard</button>
+  </ShUiSaveBar>
+</template>
+```
+
+| Prop                  | Type      | Description                           |
+| --------------------- | --------- | ------------------------------------- |
+| `id`                  | `string`  | Unique identifier                     |
+| `discardConfirmation` | `boolean` | Show a confirmation dialog on discard |
+
+| Event  | Description                            |
+| ------ | -------------------------------------- |
+| `show` | Emitted when the save bar appears      |
+| `hide` | Emitted when the save bar is dismissed |
+
+Exposed methods via template ref: `show()`, `hide()`, `toggle()`
+
+#### `<ShUiNavMenu>`
+
+Wraps [`<ui-nav-menu>`](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-nav-menu) — configures the app's navigation menu in the Shopify Admin sidebar.
+
+```vue
+<template>
+  <ShUiNavMenu>
+    <a href="/" rel="home">Home</a>
+    <a href="/products">Products</a>
+    <a href="/settings">Settings</a>
+  </ShUiNavMenu>
+</template>
+```
+
+> **Tip**: For most apps, use the `navLinks` config option with `<ShopifyAppProvider>` instead of `<ShUiNavMenu>` directly. Use `<ShUiNavMenu>` only when you need dynamic or conditional navigation.
+
+### Loading indicator
+
+`<ShLoadingIndicator>` hooks into Nuxt's `useLoadingIndicator()` and calls `shopify.loading()` to show/hide the Shopify Admin's native top loading bar during page navigations:
+
+```vue
+<!-- app.vue -->
+<template>
+  <ShLoadingIndicator />
+  <NuxtPage />
+</template>
+```
+
+This replaces `<NuxtLoadingIndicator>` with the native Shopify loading bar for a more integrated experience.
 
 ## OAuth routes
 
@@ -442,20 +598,21 @@ To load your app within the Shopify Admin, you need to:
 
 ## Features
 
-| Feature             | Description                                                                     |
-| ------------------- | ------------------------------------------------------------------------------- |
-| **Authentication**  | OAuth flow, session tokens, token exchange — all handled automatically          |
-| **App Bridge**      | CDN-based App Bridge with full TypeScript types via `@shopify/app-bridge-types` |
-| **Polaris**         | Vue wrapper components (`Sh*`) for all Polaris web components with typed props  |
-| **Typed GraphQL**   | Admin and Storefront API clients typed via `@shopify/admin-api-client`          |
-| **Webhooks**        | HMAC validation, payload parsing, and webhook registration                      |
-| **Admin API**       | GraphQL and REST clients with automatic session management                      |
-| **Storefront API**  | Typed GraphQL client for Storefront API via `@shopify/storefront-api-client`    |
-| **Billing**         | Billing context for subscription and usage-based charges                        |
-| **Session storage** | Built-in `MemorySessionStorage` default, pluggable via `configureShopify()`     |
-| **Auto-imports**    | Server utilities, client composables, and components are auto-imported          |
-| **Bot detection**   | Admin auth automatically detects bots and returns 410 to avoid unnecessary auth |
-| **CORS**            | Built-in CORS helpers for public/checkout extension endpoints                   |
+| Feature             | Description                                                                                    |
+| ------------------- | ---------------------------------------------------------------------------------------------- |
+| **Authentication**  | OAuth flow, session tokens, token exchange — all handled automatically                         |
+| **App Bridge**      | CDN-based App Bridge with full TypeScript types via `@shopify/app-bridge-types`                |
+| **Polaris**         | Vue wrapper components (`Sh*`) for all Polaris web components with typed props                 |
+| **App Bridge UI**   | Vue wrappers (`ShUi*`) for App Bridge `ui-*` components (modal, title bar, save bar, nav menu) |
+| **Typed GraphQL**   | Admin and Storefront API clients typed via `@shopify/admin-api-client`                         |
+| **Webhooks**        | HMAC validation, payload parsing, and webhook registration                                     |
+| **Admin API**       | GraphQL and REST clients with automatic session management                                     |
+| **Storefront API**  | Typed GraphQL client for Storefront API via `@shopify/storefront-api-client`                   |
+| **Billing**         | Billing context for subscription and usage-based charges                                       |
+| **Session storage** | Built-in `MemorySessionStorage` default, pluggable via `configureShopify()`                    |
+| **Auto-imports**    | Server utilities, client composables, and components are auto-imported                         |
+| **Bot detection**   | Admin auth automatically detects bots and returns 410 to avoid unnecessary auth                |
+| **CORS**            | Built-in CORS helpers for public/checkout extension endpoints                                  |
 
 ## Server utilities
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-nuxt",
   "configKey": "shopify",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/admin-api-client.d.ts

@@ -0,0 +1 @@
+export * from '@shopify/admin-api-client';

package/dist/runtime/admin-api-client.js

@@ -0,0 +1 @@
+export * from "@shopify/admin-api-client";

package/dist/runtime/components/polaris/ShUiModal.d.vue.ts

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    id?: string;
+    variant?: 'small' | 'base' | 'large' | 'max';
+    src?: string;
+};
+declare function show(): any;
+declare function hide(): any;
+declare function toggle(): any;
+declare var __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    'title-bar'?: (props: typeof __VLS_14) => any;
+} & {
+    'save-bar'?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    show: (event: Event) => void;
+    hide: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShow?: ((event: Event) => any) | undefined;
+    onHide?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiModal.vue

@@ -0,0 +1,39 @@
+<template>
+  <ui-modal
+    ref="modalRef"
+    v-bind="polarisAttrs"
+    @show="emit('show', $event)"
+    @hide="emit('hide', $event)"
+  >
+    <slot />
+    <slot name="title-bar" />
+    <slot name="save-bar" />
+  </ui-modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { usePolarisAttrs } from "./utils";
+defineOptions({ name: "ShUiModal", inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  variant: { type: String, required: false },
+  src: { type: String, required: false }
+});
+const emit = defineEmits(["show", "hide"]);
+const polarisAttrs = usePolarisAttrs(props);
+const modalRef = ref(null);
+function getEl() {
+  return modalRef.value;
+}
+function show() {
+  return getEl()?.show?.();
+}
+function hide() {
+  return getEl()?.hide?.();
+}
+function toggle() {
+  return getEl()?.toggle?.();
+}
+defineExpose({ show, hide, toggle, el: modalRef });
+</script>

package/dist/runtime/components/polaris/ShUiModal.vue.d.ts

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    id?: string;
+    variant?: 'small' | 'base' | 'large' | 'max';
+    src?: string;
+};
+declare function show(): any;
+declare function hide(): any;
+declare function toggle(): any;
+declare var __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    'title-bar'?: (props: typeof __VLS_14) => any;
+} & {
+    'save-bar'?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    show: (event: Event) => void;
+    hide: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShow?: ((event: Event) => any) | undefined;
+    onHide?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiNavMenu.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiNavMenu.vue

@@ -0,0 +1,9 @@
+<template>
+  <ui-nav-menu v-bind="$attrs">
+    <slot />
+  </ui-nav-menu>
+</template>
+
+<script setup>
+defineOptions({ name: "ShUiNavMenu", inheritAttrs: false });
+</script>

package/dist/runtime/components/polaris/ShUiNavMenu.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiSaveBar.d.vue.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    id?: string;
+    discardConfirmation?: boolean;
+};
+declare function show(): any;
+declare function hide(): any;
+declare function toggle(): any;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    show: (event: Event) => void;
+    hide: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShow?: ((event: Event) => any) | undefined;
+    onHide?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiSaveBar.vue

@@ -0,0 +1,36 @@
+<template>
+  <ui-save-bar
+    ref="saveBarRef"
+    v-bind="polarisAttrs"
+    @show="emit('show', $event)"
+    @hide="emit('hide', $event)"
+  >
+    <slot />
+  </ui-save-bar>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { usePolarisAttrs } from "./utils";
+defineOptions({ name: "ShUiSaveBar", inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  discardConfirmation: { type: Boolean, required: false }
+});
+const emit = defineEmits(["show", "hide"]);
+const polarisAttrs = usePolarisAttrs(props);
+const saveBarRef = ref(null);
+function getEl() {
+  return saveBarRef.value;
+}
+function show() {
+  return getEl()?.show?.();
+}
+function hide() {
+  return getEl()?.hide?.();
+}
+function toggle() {
+  return getEl()?.toggle?.();
+}
+defineExpose({ show, hide, toggle, el: saveBarRef });
+</script>

package/dist/runtime/components/polaris/ShUiSaveBar.vue.d.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    id?: string;
+    discardConfirmation?: boolean;
+};
+declare function show(): any;
+declare function hide(): any;
+declare function toggle(): any;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    show: (event: Event) => void;
+    hide: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShow?: ((event: Event) => any) | undefined;
+    onHide?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiTitleBar.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    title?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/polaris/ShUiTitleBar.vue

@@ -0,0 +1,14 @@
+<template>
+  <ui-title-bar v-bind="polarisAttrs">
+    <slot />
+  </ui-title-bar>
+</template>
+
+<script setup>
+import { usePolarisAttrs } from "./utils";
+defineOptions({ name: "ShUiTitleBar", inheritAttrs: false });
+const props = defineProps({
+  title: { type: String, required: false }
+});
+const polarisAttrs = usePolarisAttrs(props);
+</script>

package/dist/runtime/components/polaris/ShUiTitleBar.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    title?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useShopifyFetch.d.ts

@@ -1,13 +1,10 @@
 import type { NitroFetchRequest, TypedInternalResponse, AvailableRouterMethod } from 'nitropack/types';
 import type { RouterMethod } from 'h3';
 type ShopifyFetchData<T, R extends NitroFetchRequest, M extends RouterMethod> = [T] extends [undefined] ? TypedInternalResponse<R, unknown, M> : T;
-interface ShopifyFetchFunction {
-    <T = undefined, R extends NitroFetchRequest = NitroFetchRequest, M extends AvailableRouterMethod<R> = 'get' extends AvailableRouterMethod<R> ? 'get' : AvailableRouterMethod<R>>(url: R, options?: Omit<RequestInit, 'method'> & {
-        method?: Uppercase<M> | M;
-    }): Promise<{
-        data: ShopifyFetchData<T, R, Extract<Lowercase<M>, RouterMethod>>;
-        response: Response;
-    }>;
-}
-export declare function useShopifyFetch(): ShopifyFetchFunction;
+export declare function useShopifyFetch<T = undefined, R extends NitroFetchRequest = NitroFetchRequest, M extends AvailableRouterMethod<R> = 'get' extends AvailableRouterMethod<R> ? 'get' : AvailableRouterMethod<R>>(url: R, options?: Omit<RequestInit, 'method'> & {
+    method?: Uppercase<M> | M;
+}): Promise<{
+    data: ShopifyFetchData<T, R, Extract<Lowercase<M>, RouterMethod>>;
+    response: Response;
+}>;
 export {};

package/dist/runtime/composables/useShopifyFetch.js

@@ -1,52 +1,49 @@
 import { useNuxtApp, useRequestEvent } from "#app";
-export function useShopifyFetch() {
+export async function useShopifyFetch(url, options) {
+  const opts = options ?? {};
   if (import.meta.server) {
     const event = useRequestEvent();
-    return (async (url, options = {}) => {
-      const headers = {};
-      const authHeader = event?.headers.get("authorization");
-      if (authHeader) {
-        headers["Authorization"] = authHeader;
-      }
-      if (options.headers) {
-        const incoming = new Headers(options.headers);
-        incoming.forEach((value, key) => {
-          headers[key] = value;
-        });
-      }
-      const { method, ...rest } = options;
-      const response = await globalThis.$fetch.raw(url, {
-        ...rest,
-        method,
-        headers
+    const headers2 = {};
+    const authHeader = event?.headers.get("authorization");
+    if (authHeader) {
+      headers2["Authorization"] = authHeader;
+    }
+    if (opts.headers) {
+      const incoming = new Headers(opts.headers);
+      incoming.forEach((value, key) => {
+        headers2[key] = value;
       });
-      return { data: response._data, response };
+    }
+    const { method, ...rest } = opts;
+    const fetchResponse2 = await globalThis.$fetch.raw(url, {
+      ...rest,
+      method,
+      headers: headers2
     });
+    return { data: fetchResponse2._data, response: fetchResponse2 };
   }
   const nuxtApp = useNuxtApp();
-  return (async (url, options = {}) => {
-    const shopify = nuxtApp.$shopify;
-    if (!shopify) {
-      throw new Error(
-        "Shopify App Bridge is not available. Make sure the app is loaded within the Shopify Admin."
-      );
-    }
-    const token = await shopify.idToken();
-    const headers = new Headers(options.headers || {});
-    headers.set("Authorization", `Bearer ${token}`);
-    const response = await fetch(url, {
-      ...options,
-      headers
-    });
-    if (!response.ok) {
-      throw new Error(
-        `Shopify fetch failed: ${response.status} ${response.statusText}`
-      );
-    }
-    const contentType = response.headers.get("content-type");
-    if (contentType?.includes("application/json")) {
-      return { data: await response.json(), response };
-    }
-    return { data: await response.text(), response };
+  const shopify = nuxtApp.$shopify;
+  if (!shopify) {
+    throw new Error(
+      "Shopify App Bridge is not available. Make sure the app is loaded within the Shopify Admin."
+    );
+  }
+  const token = await shopify.idToken();
+  const headers = new Headers(opts.headers || {});
+  headers.set("Authorization", `Bearer ${token}`);
+  const fetchResponse = await fetch(url, {
+    ...opts,
+    headers
   });
+  if (!fetchResponse.ok) {
+    throw new Error(
+      `Shopify fetch failed: ${fetchResponse.status} ${fetchResponse.statusText}`
+    );
+  }
+  const contentType = fetchResponse.headers.get("content-type");
+  if (contentType?.includes("application/json")) {
+    return { data: await fetchResponse.json(), response: fetchResponse };
+  }
+  return { data: await fetchResponse.text(), response: fetchResponse };
 }

package/dist/runtime/shopify-api.d.ts

@@ -0,0 +1 @@
+export * from '@shopify/shopify-api';

package/dist/runtime/shopify-api.js

@@ -0,0 +1 @@
+export * from "@shopify/shopify-api";

package/dist/runtime/shopify-app-session-storage-memory.d.ts

@@ -0,0 +1 @@
+export * from '@shopify/shopify-app-session-storage-memory';

package/dist/runtime/shopify-app-session-storage-memory.js

@@ -0,0 +1 @@
+export * from "@shopify/shopify-app-session-storage-memory";

package/dist/runtime/shopify-app-session-storage.d.ts

@@ -0,0 +1 @@
+export * from '@shopify/shopify-app-session-storage';

package/dist/runtime/shopify-app-session-storage.js

@@ -0,0 +1 @@
+export * from "@shopify/shopify-app-session-storage";

package/dist/runtime/storefront-api-client.d.ts

@@ -0,0 +1 @@
+export * from '@shopify/storefront-api-client';

package/dist/runtime/storefront-api-client.js

@@ -0,0 +1 @@
+export * from "@shopify/storefront-api-client";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-nuxt",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Shopify app integration for Nuxt - authentication, webhooks, billing, and App Bridge",
   "repository": "kiriminaja/shopify-nuxt",
   "license": "MIT",
@@ -15,6 +15,26 @@
     "./test-helpers": {
       "types": "./dist/runtime/server/test-helpers/index.d.ts",
       "import": "./dist/runtime/server/test-helpers/index.js"
+    },
+    "./shopify-api": {
+      "types": "./dist/runtime/shopify-api.d.ts",
+      "import": "./dist/runtime/shopify-api.js"
+    },
+    "./shopify-app-session-storage": {
+      "types": "./dist/runtime/shopify-app-session-storage.d.ts",
+      "import": "./dist/runtime/shopify-app-session-storage.js"
+    },
+    "./shopify-app-session-storage-memory": {
+      "types": "./dist/runtime/shopify-app-session-storage-memory.d.ts",
+      "import": "./dist/runtime/shopify-app-session-storage-memory.js"
+    },
+    "./admin-api-client": {
+      "types": "./dist/runtime/admin-api-client.d.ts",
+      "import": "./dist/runtime/admin-api-client.js"
+    },
+    "./storefront-api-client": {
+      "types": "./dist/runtime/storefront-api-client.d.ts",
+      "import": "./dist/runtime/storefront-api-client.js"
     }
   },
   "main": "./dist/module.mjs",
@@ -23,6 +43,21 @@
     "*": {
       ".": [
         "./dist/types.d.mts"
+      ],
+      "shopify-api": [
+        "./dist/runtime/shopify-api.d.ts"
+      ],
+      "shopify-app-session-storage": [
+        "./dist/runtime/shopify-app-session-storage.d.ts"
+      ],
+      "shopify-app-session-storage-memory": [
+        "./dist/runtime/shopify-app-session-storage-memory.d.ts"
+      ],
+      "admin-api-client": [
+        "./dist/runtime/admin-api-client.d.ts"
+      ],
+      "storefront-api-client": [
+        "./dist/runtime/storefront-api-client.d.ts"
       ]
     }
   },
@@ -53,7 +88,7 @@
     "@shopify/shopify-app-session-storage": "^5.0.0",
     "@shopify/shopify-app-session-storage-memory": "^6.0.0",
     "@shopify/storefront-api-client": "^1.0.10",
-    "h3": "^1.15.0",
+    "h3": "^2.0.0",
     "isbot": "^5.1.36"
   },
   "devDependencies": {