shopify-nuxt 0.0.10 → 0.0.11

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.
 
@@ -391,6 +393,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 +423,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 +583,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.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-nuxt",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Shopify app integration for Nuxt - authentication, webhooks, billing, and App Bridge",
   "repository": "kiriminaja/shopify-nuxt",
   "license": "MIT",