shopify-nuxt 0.0.3 → 0.0.4

package/README.md

@@ -99,6 +99,7 @@ Any config passed to `configureShopify()` is merged with the defaults — you on
 | `distribution`    | `AppDistribution` | `app_store`      | App distribution type (`app_store`, `single_merchant`, `shopify_admin`) |
 | `useOnlineTokens` | `boolean`         | `false`          | Use online (per-user) tokens in addition to offline (per-shop) tokens   |
 | `authPage`        | `string \| false` | built-in page    | Custom auth page component path, or `false` to disable                  |
+| `navLinks`        | `NavLink[]`       | `[]`             | Navigation links for the app sidebar (used by `<ShopifyAppProvider>`)   |
 
 ## Authenticating admin requests
 
@@ -298,6 +299,46 @@ const { data: products } = await useAsyncData(
 
 ## Using Polaris components
 
+### `<ShopifyAppProvider>`
+
+Wrap your app pages with `<ShopifyAppProvider>` to automatically render the [App Bridge navigation menu](https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-nav) from your module config:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['shopify-nuxt'],
+  shopify: {
+    // ...
+    navLinks: [
+      { label: 'Home', href: '/', rel: 'home' },
+      { label: 'Products', href: '/products' },
+      { label: 'Settings', href: '/settings' }
+    ]
+  }
+})
+```
+
+```vue
+<!-- layouts/default.vue -->
+<template>
+  <ShopifyAppProvider>
+    <slot />
+  </ShopifyAppProvider>
+</template>
+```
+
+You can also override the links per-component via the `links` prop:
+
+```vue
+<ShopifyAppProvider :links="[{ label: 'Home', href: '/', rel: 'home' }]">
+  <slot />
+</ShopifyAppProvider>
+```
+
+Each `NavLink` has: `label` (string), `href` (string), and optionally `rel: 'home'` to set the default landing page.
+
+### Polaris web components
+
 This module provides Vue wrapper components for [Shopify Polaris web components](https://shopify.dev/docs/api/app-home/web-components). Use the `Sh`-prefixed wrappers instead of the raw `s-*` web components — they provide typed props with autocomplete, v-model support for form components, and work seamlessly with Vue's reactivity system.
 
 ```vue
@@ -350,6 +391,34 @@ Content: `ShText`, `ShHeading`, `ShParagraph`, `ShIcon`, `ShImage`, `ShThumbnail
 
 Other: `ShModal`, `ShQueryContainer`
 
+### 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:
+
+```vue
+<template>
+  <ShButton command-for="my-modal" command="--show">Open</ShButton>
+
+  <ShModal id="my-modal" heading="Confirm action">
+    <ShParagraph>Are you sure?</ShParagraph>
+
+    <ShButton slot="secondary-actions" command-for="my-modal" command="--hide">
+      Cancel
+    </ShButton>
+    <ShButton
+      slot="primary-action"
+      variant="primary"
+      command-for="my-modal"
+      command="--hide"
+    >
+      Confirm
+    </ShButton>
+  </ShModal>
+</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.
+
 ## OAuth routes
 
 The module automatically registers these routes:

package/dist/module.json

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

package/dist/module.mjs

@@ -30,7 +30,8 @@ const module$1 = defineNuxtModule({
     nuxt.options.runtimeConfig.public.shopify = {
       apiKey: options.apiKey,
       authPagePath: options.authPage !== false ? "/auth" : "",
-      authPathPrefix: options.authPathPrefix || "/_shopify/auth"
+      authPathPrefix: options.authPathPrefix || "/_shopify/auth",
+      navLinks: options.navLinks || []
     };
     nuxt.options.alias["#shopify/server"] = resolver.resolve("./runtime/server");
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
@@ -69,7 +70,7 @@ const module$1 = defineNuxtModule({
         ...nuxt.options.app.head.script || []
       ];
       nuxt.options.vue.compilerOptions.isCustomElement = (tag) => {
-        return tag.startsWith("s-");
+        return tag.startsWith("s-") || tag.startsWith("ui-");
       };
     });
     addTypeTemplate({

package/dist/runtime/components/ShopifyAppProvider.d.vue.ts

@@ -0,0 +1,18 @@
+import type { NavLink } from '../types.js';
+type __VLS_Props = {
+    /** Override the nav links from module config */
+    links?: NavLink[];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/ShopifyAppProvider.vue

@@ -0,0 +1,22 @@
+<template>
+  <slot />
+  <ShAppNav v-if="navLinks.length">
+    <ShLink
+      v-for="link in navLinks"
+      :key="link.href"
+      :href="link.href"
+      :rel="link.rel"
+    >
+      {{ link.label }}
+    </ShLink>
+  </ShAppNav>
+</template>
+
+<script setup>
+import { useRuntimeConfig } from "#app";
+const props = defineProps({
+  links: { type: Array, required: false }
+});
+const config = useRuntimeConfig().public.shopify;
+const navLinks = props.links || config.navLinks || [];
+</script>

package/dist/runtime/components/ShopifyAppProvider.vue.d.ts

@@ -0,0 +1,18 @@
+import type { NavLink } from '../types.js';
+type __VLS_Props = {
+    /** Override the nav links from module config */
+    links?: NavLink[];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/ShButton.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     blur: (event: FocusEvent) => void;
     focus: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -22,8 +22,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     blur: (event: FocusEvent) => void;
     focus: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -20,15 +20,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -20,15 +20,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -25,17 +25,17 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: Event) => void;
-    focus: (event: Event) => void;
     input: (event: Event) => void;
+    blur: (event: Event) => void;
     change: (event: Event) => void;
+    focus: (event: Event) => void;
     invalid: (event: Event) => void;
     viewchange: (event: Event) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: Event) => any) | undefined;
-    onFocus?: ((event: Event) => any) | undefined;
     onInput?: ((event: Event) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
     onChange?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: Event) => any) | undefined;
     onInvalid?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
     onViewchange?: ((event: Event) => any) | undefined;

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

@@ -25,17 +25,17 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: Event) => void;
-    focus: (event: Event) => void;
     input: (event: Event) => void;
+    blur: (event: Event) => void;
     change: (event: Event) => void;
+    focus: (event: Event) => void;
     invalid: (event: Event) => void;
     viewchange: (event: Event) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: Event) => any) | undefined;
-    onFocus?: ((event: Event) => any) | undefined;
     onInput?: ((event: Event) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
     onChange?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: Event) => any) | undefined;
     onInvalid?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
     onViewchange?: ((event: Event) => any) | undefined;

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

@@ -16,16 +16,16 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: Event) => void;
-    focus: (event: Event) => void;
     input: (event: Event) => void;
+    blur: (event: Event) => void;
     change: (event: Event) => void;
+    focus: (event: Event) => void;
     viewchange: (event: Event) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: Event) => any) | undefined;
-    onFocus?: ((event: Event) => any) | undefined;
     onInput?: ((event: Event) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
     onChange?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
     onViewchange?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -16,16 +16,16 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: Event) => void;
-    focus: (event: Event) => void;
     input: (event: Event) => void;
+    blur: (event: Event) => void;
     change: (event: Event) => void;
+    focus: (event: Event) => void;
     viewchange: (event: Event) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: Event) => any) | undefined;
-    onFocus?: ((event: Event) => any) | undefined;
     onInput?: ((event: Event) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
     onChange?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
     onViewchange?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,12 +1,17 @@
 type __VLS_Props = {
-    accessibilityLabel?: string;
+    id: string;
     heading?: string;
+    accessibilityLabel?: string;
     padding?: 'base' | 'none';
     size?: 'small' | 'small-100' | 'base' | 'large' | 'large-100';
 };
-declare var __VLS_8: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
+} & {
+    'primary-action'?: (props: typeof __VLS_10) => any;
+} & {
+    'secondary-actions'?: (props: typeof __VLS_12) => 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>;

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

@@ -1,6 +1,8 @@
 <template>
   <s-modal v-bind="polarisAttrs">
     <slot />
+    <slot name="primary-action" />
+    <slot name="secondary-actions" />
   </s-modal>
 </template>
 
@@ -8,8 +10,9 @@
 import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShModal", inheritAttrs: false });
 const props = defineProps({
-  accessibilityLabel: { type: String, required: false },
+  id: { type: String, required: true },
   heading: { type: String, required: false },
+  accessibilityLabel: { type: String, required: false },
   padding: { type: String, required: false },
   size: { type: String, required: false }
 });

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

@@ -1,12 +1,17 @@
 type __VLS_Props = {
-    accessibilityLabel?: string;
+    id: string;
     heading?: string;
+    accessibilityLabel?: string;
     padding?: 'base' | 'none';
     size?: 'small' | 'small-100' | 'base' | 'large' | 'large-100';
 };
-declare var __VLS_8: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
+} & {
+    'primary-action'?: (props: typeof __VLS_10) => any;
+} & {
+    'secondary-actions'?: (props: typeof __VLS_12) => 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>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -25,15 +25,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -25,15 +25,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -22,15 +22,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -22,15 +22,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -24,15 +24,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -24,15 +24,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -21,15 +21,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: string) => void;
-    blur: (event: InputEvent) => void;
-    focus: (event: InputEvent) => void;
     input: (event: InputEvent) => void;
+    blur: (event: InputEvent) => void;
     change: (event: InputEvent) => void;
+    focus: (event: InputEvent) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBlur?: ((event: InputEvent) => any) | undefined;
-    onFocus?: ((event: InputEvent) => any) | undefined;
     onInput?: ((event: InputEvent) => any) | undefined;
+    onBlur?: ((event: InputEvent) => any) | undefined;
     onChange?: ((event: InputEvent) => any) | undefined;
+    onFocus?: ((event: InputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/types.d.ts

@@ -54,6 +54,20 @@ export interface ModuleOptions {
      * @default undefined (uses built-in page)
      */
     authPage?: string | false;
+    /**
+     * Navigation links for the app sidebar (`<ShAppNav>`).
+     * Used by `<ShopifyAppProvider>` to render the App Bridge nav menu.
+     * Each link has a `label`, `href`, and optionally `rel: 'home'` for the default landing page.
+     */
+    navLinks?: NavLink[];
+}
+export interface NavLink {
+    /** The visible label text for the navigation item */
+    label: string;
+    /** The URL path for the navigation item (e.g., `/products`) */
+    href: string;
+    /** Set to `'home'` to designate this link as the app's default landing page */
+    rel?: 'home';
 }
 export type WebhookConfig = Record<string, WebhookHandler | WebhookHandler[]>;
 export interface AfterAuthOptions {
@@ -146,6 +160,7 @@ export interface ShopifyPublicConfig {
     apiKey: string;
     authPagePath: string;
     authPathPrefix: string;
+    navLinks: NavLink[];
 }
 declare module 'nuxt/schema' {
     interface RuntimeConfig {

package/package.json

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