shopify-nuxt 0.0.2 → 0.0.4

package/README.md

@@ -47,22 +47,34 @@ export default defineNuxtConfig({
   shopify: {
     apiKey: 'ApiKeyFromPartnersDashboard',
     apiSecretKey: 'ApiSecretKeyFromPartnersDashboard',
-    scopes: ['read_products', 'write_products'],
     appUrl: 'https://your-app-url.com'
   }
 })
 ```
 
-For session storage and post-auth hooks, create a Nitro server plugin:
+All values can also be set via environment variables:
+
+| Option         | Env Variable                  |
+| -------------- | ----------------------------- |
+| `apiKey`       | `NUXT_SHOPIFY_API_KEY`        |
+| `apiSecretKey` | `NUXT_SHOPIFY_API_SECRET_KEY` |
+| `appUrl`       | `NUXT_SHOPIFY_APP_URL`        |
+
+### Session storage
+
+By default, the module provides an in-memory session storage (`MemorySessionStorage`) that works out of the box — no configuration needed. For production use, you should use a persistent session storage adapter.
+
+To override the default session storage or configure lifecycle hooks, create a Nitro server plugin:
 
 ```ts
 // server/plugins/shopify.ts
 import { configureShopify } from '#shopify/server'
-import { MemorySessionStorage } from '@shopify/shopify-app-session-storage-memory'
+import { PrismaSessionStorage } from '@shopify/shopify-app-session-storage-prisma'
+import { prisma } from '~/server/utils/prisma'
 
 export default defineNitroPlugin(() => {
   configureShopify({
-    sessionStorage: new MemorySessionStorage(),
+    sessionStorage: new PrismaSessionStorage(prisma),
     hooks: {
       afterAuth: async ({ session, admin }) => {
         // Register webhooks, seed data, etc.
@@ -72,14 +84,31 @@ export default defineNitroPlugin(() => {
 })
 ```
 
-### Authenticating admin requests
+Any config passed to `configureShopify()` is merged with the defaults — you only need to specify what you want to override.
+
+### Module options
 
-Use `useShopifyAdmin()` in your server API routes to authenticate requests from the Shopify admin:
+| Option            | Type              | Default          | Description                                                             |
+| ----------------- | ----------------- | ---------------- | ----------------------------------------------------------------------- |
+| `apiKey`          | `string`          | —                | Your Shopify API key from the Partners dashboard                        |
+| `apiSecretKey`    | `string`          | —                | Your Shopify API secret key                                             |
+| `scopes`          | `string[]`        | `[]`             | OAuth scopes (optional — Shopify reads from `shopify.app.toml`)         |
+| `appUrl`          | `string`          | —                | Your app's public URL (tunnel URL in development)                       |
+| `apiVersion`      | `ApiVersion`      | Latest stable    | The Shopify API version to use                                          |
+| `authPathPrefix`  | `string`          | `/_shopify/auth` | URL prefix for OAuth endpoints                                          |
+| `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
+
+Use `useShopifyAdmin()` in your server API routes to authenticate requests from the Shopify admin. The returned `admin` object provides **typed GraphQL** and REST clients powered by `@shopify/admin-api-client`:
 
 ```ts
 // server/api/products.ts
 export default defineEventHandler(async (event) => {
-  const { admin } = await useShopifyAdmin(event)
+  const { admin, session } = await useShopifyAdmin(event)
 
   const response = await admin.graphql(`{
     products(first: 5) {
@@ -92,13 +121,57 @@ export default defineEventHandler(async (event) => {
     }
   }`)
 
-  return response
+  return await response.json()
 })
 ```
 
-### Handling webhooks
+#### GraphQL with variables
 
-Use `useShopifyWebhook()` to validate and process incoming webhooks:
+```ts
+const response = await admin.graphql(
+  `#graphql
+  mutation populateProduct($input: ProductInput!) {
+    productCreate(input: $input) {
+      product {
+        id
+        title
+      }
+    }
+  }`,
+  {
+    variables: {
+      input: { title: 'New Product' }
+    }
+  }
+)
+
+const { data } = await response.json()
+```
+
+#### REST API
+
+```ts
+const products = await admin.rest.get({ path: 'products' })
+await admin.rest.post({
+  path: 'products',
+  data: { product: { title: 'New Product' } }
+})
+```
+
+#### Full `AdminContext` return type
+
+| Property       | Type                       | Description                                        |
+| -------------- | -------------------------- | -------------------------------------------------- |
+| `session`      | `Session`                  | The authenticated Shopify session                  |
+| `admin`        | `AdminApiContext`          | GraphQL and REST API clients                       |
+| `sessionToken` | `JwtPayload \| undefined`  | Decoded session token (embedded apps only)         |
+| `billing`      | `BillingContext`           | Helpers for `require()`, `check()`, `request()`    |
+| `cors`         | `(response) => Response`   | Add CORS headers to a response                     |
+| `redirect`     | `(url, init?) => Response` | Redirect helper that works inside embedded iframes |
+
+## Handling webhooks
+
+Use `useShopifyWebhook()` to validate and process incoming webhooks. HMAC verification is handled automatically:
 
 ```ts
 // server/api/webhooks.ts
@@ -118,7 +191,81 @@ export default defineEventHandler(async (event) => {
 })
 ```
 
-### Using App Bridge on the client
+#### Registering webhooks programmatically
+
+```ts
+// server/plugins/shopify.ts
+import { configureShopify, registerShopifyWebhooks } from '#shopify/server'
+
+export default defineNitroPlugin(() => {
+  configureShopify({
+    hooks: {
+      afterAuth: async ({ session }) => {
+        await registerShopifyWebhooks(session)
+      }
+    }
+  })
+})
+```
+
+> **Tip**: For most apps, registering webhooks via `shopify.app.toml` is sufficient. Use `registerShopifyWebhooks()` only when you need dynamic, per-shop webhook registration.
+
+## Authenticating other request types
+
+### Shopify Flow
+
+```ts
+// server/api/flow.ts
+export default defineEventHandler(async (event) => {
+  const { session, admin, payload } = await useShopifyFlow(event)
+  // Handle Flow trigger/action
+})
+```
+
+### Public requests (checkout extensions, etc.)
+
+```ts
+// server/api/public/widget.ts
+export default defineEventHandler(async (event) => {
+  const { sessionToken, cors } = await useShopifyPublic(event)
+  // sessionToken contains the decoded JWT payload
+  // Use cors() to wrap your response with CORS headers
+})
+```
+
+### Unauthenticated access (background jobs)
+
+For accessing the Shopify API without an incoming request (cron jobs, background tasks):
+
+```ts
+// server/api/cron/sync.ts
+export default defineEventHandler(async () => {
+  const { admin } = await useShopifyUnauthenticatedAdmin(
+    'my-shop.myshopify.com'
+  )
+
+  const response = await admin.graphql(`{
+    products(first: 10) { edges { node { id title } } }
+  }`)
+
+  return await response.json()
+})
+```
+
+```ts
+// Storefront API access
+const { storefront } = await useShopifyUnauthenticatedStorefront(
+  'my-shop.myshopify.com'
+)
+
+const response = await storefront.graphql(`{
+  products(first: 10) { edges { node { id title } } }
+}`)
+```
+
+Both the admin and storefront GraphQL clients are typed via `@shopify/admin-api-client` and `@shopify/storefront-api-client` respectively.
+
+## Using App Bridge on the client
 
 The module automatically injects the Shopify App Bridge CDN script and provides typed access via composables:
 
@@ -127,15 +274,72 @@ The module automatically injects the Shopify App Bridge CDN script and provides
 // Access the App Bridge instance (typed as ShopifyGlobal)
 const shopify = useAppBridge()
 
-// Or use the authenticated fetch wrapper
+// Get the current shop
+const shop = shopify.config.shop
+</script>
+```
+
+### Authenticated fetch
+
+Use `useShopifyFetch()` for client-side API calls that automatically include the session token:
+
+```vue
+<script setup>
 const shopifyFetch = useShopifyFetch()
-const { data } = await shopifyFetch('/api/products')
+
+const { data: products } = await useAsyncData(
+  'products',
+  () => shopifyFetch('/api/products'),
+  { server: false }
+)
 </script>
 ```
 
-### Using Polaris components
+> **Important**: Always use `server: false` with `useShopifyFetch()` — session tokens are only available on the client side within the Shopify admin iframe.
+
+## Using Polaris 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 and work seamlessly with Vue's reactivity system.
+### `<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
 <template>
@@ -150,17 +354,85 @@ This module provides Vue wrapper components for [Shopify Polaris web components]
     </ShBanner>
 
     <ShTextField
+      v-model="title"
       label="Product title"
-      :value="title"
       placeholder="Enter product title"
     />
+
+    <ShSelect
+      v-model="status"
+      label="Status"
+      :options="[
+        { label: 'Active', value: 'active' },
+        { label: 'Draft', value: 'draft' }
+      ]"
+    />
   </ShPage>
 </template>
 ```
 
 All `Sh*` components are auto-imported — no manual imports needed. Each component maps directly to its Polaris web component counterpart (e.g., `<ShButton>` → `<s-button>`, `<ShTextField>` → `<s-text-field>`).
 
-### Loading your app in Shopify Admin
+### Available components
+
+Layout & structure: `ShPage`, `ShBox`, `ShStack`, `ShGrid`, `ShGridItem`, `ShSection`, `ShDivider`
+
+Actions: `ShButton`, `ShButtonGroup`, `ShClickable`, `ShLink`
+
+Forms: `ShTextField`, `ShNumberField`, `ShEmailField`, `ShPasswordField`, `ShUrlField`, `ShMoneyField`, `ShColorField`, `ShDateField`, `ShTextArea`, `ShSelect`, `ShCheckbox`, `ShSwitch`, `ShChoiceList`, `ShChoice`, `ShSearchField`, `ShDropZone`, `ShColorPicker`, `ShDatePicker`
+
+Feedback: `ShBanner`, `ShBadge`, `ShSpinner`, `ShTooltip`
+
+Navigation: `ShAppNav`, `ShMenu`, `ShOption`, `ShOptionGroup`, `ShPopover`
+
+Data: `ShTable`, `ShTableHeader`, `ShTableHeaderRow`, `ShTableBody`, `ShTableRow`, `ShTableCell`
+
+Content: `ShText`, `ShHeading`, `ShParagraph`, `ShIcon`, `ShImage`, `ShThumbnail`, `ShAvatar`, `ShChip`, `ShClickableChip`, `ShListItem`, `ShOrderedList`, `ShUnorderedList`
+
+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:
+
+| Route                              | Purpose                                |
+| ---------------------------------- | -------------------------------------- |
+| `GET /_shopify/auth`               | Start the OAuth flow                   |
+| `GET /_shopify/auth/callback`      | Handle the OAuth callback from Shopify |
+| `GET /_shopify/auth/exit-iframe`   | App Bridge iframe escape page          |
+| `GET /_shopify/auth/session-token` | Session token bounce page              |
+
+The prefix `/_shopify/auth` is configurable via the `authPathPrefix` option.
+
+## Loading your app in Shopify Admin
 
 To load your app within the Shopify Admin, you need to:
 
@@ -175,11 +447,15 @@ To load your app within the Shopify Admin, you need to:
 | **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** | Pluggable session storage via `@shopify/shopify-app-session-storage`            |
-| **Auto-imports**    | Server utilities and client composables are auto-imported                       |
+| **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
 
@@ -198,14 +474,39 @@ These are auto-imported in your `server/` directory:
 | `useShopifyUnauthenticatedStorefront(shop)` | Offline session storefront API access                 |
 | `registerShopifyWebhooks(session)`          | Register webhooks for a shop                          |
 
+### `#shopify/server` exports
+
+For use in Nitro plugins and advanced server-side configuration:
+
+```ts
+import {
+  configureShopify,
+  getShopifyApi,
+  getResolvedConfig,
+  getSessionStorage,
+  registerShopifyWebhooks,
+  createAdminApiContext,
+  createStorefrontApiContext
+} from '#shopify/server'
+
+// Types
+import type {
+  AdminApiContext,
+  StorefrontApiContext,
+  GraphQLClient,
+  GraphQLQueryOptions,
+  GraphQLResponse
+} from '#shopify/server'
+```
+
 ## Client composables
 
 These are auto-imported in your Vue components:
 
-| Composable          | Purpose                                           |
-| ------------------- | ------------------------------------------------- |
-| `useAppBridge()`    | Returns typed `ShopifyGlobal` from App Bridge CDN |
-| `useShopifyFetch()` | Fetch wrapper with automatic session token auth   |
+| Composable          | Purpose                                                              |
+| ------------------- | -------------------------------------------------------------------- |
+| `useAppBridge()`    | Returns typed `ShopifyGlobal` from App Bridge CDN                    |
+| `useShopifyFetch()` | Fetch wrapper with automatic session token in `Authorization` header |
 
 ## Testing your app
 
@@ -219,8 +520,38 @@ const config = testConfig()
 
 // testSession() returns a mock Shopify session
 const session = testSession()
+
+// Both accept overrides
+const customConfig = testConfig({ apiKey: 'custom-key' })
+const customSession = testSession({ shop: 'custom-shop.myshopify.com' })
+```
+
+## TypeScript
+
+The module augments Nuxt's `RuntimeConfig` types so you get full autocomplete and type safety when accessing config:
+
+```ts
+// Server — all Shopify config fields are typed
+const config = useRuntimeConfig()
+config.shopify.apiKey // string
+config.shopify.apiSecretKey // string
+config.shopify.scopes // string[]
+config.shopify.appUrl // string
+
+// Client — only public fields
+const publicConfig = useRuntimeConfig().public
+publicConfig.shopify.apiKey // string
+publicConfig.shopify.authPagePath // string
+publicConfig.shopify.authPathPrefix // string
 ```
 
+The types are declared via module augmentation in `nuxt/schema`:
+
+| Interface             | Key       | Fields                                                                                                          |
+| --------------------- | --------- | --------------------------------------------------------------------------------------------------------------- |
+| `RuntimeConfig`       | `shopify` | `apiKey`, `apiSecretKey`, `scopes`, `appUrl`, `apiVersion`, `authPathPrefix`, `distribution`, `useOnlineTokens` |
+| `PublicRuntimeConfig` | `shopify` | `apiKey`, `authPagePath`, `authPathPrefix`                                                                      |
+
 ## Resources
 
 Getting started:
@@ -237,6 +568,14 @@ Shopify:
 - [App extensions](https://shopify.dev/docs/apps/app-extensions/list)
 - [Shopify Functions](https://shopify.dev/docs/api/functions)
 
+Session storage adapters:
+
+- [`@shopify/shopify-app-session-storage-prisma`](https://www.npmjs.com/package/@shopify/shopify-app-session-storage-prisma)
+- [`@shopify/shopify-app-session-storage-drizzle`](https://www.npmjs.com/package/@shopify/shopify-app-session-storage-drizzle)
+- [`@shopify/shopify-app-session-storage-redis`](https://www.npmjs.com/package/@shopify/shopify-app-session-storage-redis)
+- [`@shopify/shopify-app-session-storage-mongodb`](https://www.npmjs.com/package/@shopify/shopify-app-session-storage-mongodb)
+- [`@shopify/shopify-app-session-storage-memory`](https://www.npmjs.com/package/@shopify/shopify-app-session-storage-memory) (default, not for production)
+
 ## Contributing
 
 <details>

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addServerImportsDir, addImportsDir, addComponentsDir, addTypeTemplate, addPlugin, addServerHandler, addRouteMiddleware } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerImportsDir, addImportsDir, addComponentsDir, addTypeTemplate, addPlugin, addServerHandler, addRouteMiddleware, extendPages } from '@nuxt/kit';
 import { ApiVersion } from '@shopify/shopify-api';
 
 const module$1 = defineNuxtModule({
@@ -9,7 +9,6 @@ const module$1 = defineNuxtModule({
   defaults: {
     apiKey: "",
     apiSecretKey: "",
-    scopes: [],
     appUrl: "",
     apiVersion: ApiVersion.January26,
     authPathPrefix: "/_shopify/auth",
@@ -21,7 +20,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.runtimeConfig.shopify = {
       apiKey: options.apiKey,
       apiSecretKey: options.apiSecretKey,
-      scopes: options.scopes,
+      scopes: options.scopes || [],
       appUrl: options.appUrl,
       apiVersion: options.apiVersion || ApiVersion.January26,
       authPathPrefix: options.authPathPrefix || "/_shopify/auth",
@@ -29,7 +28,10 @@ const module$1 = defineNuxtModule({
       useOnlineTokens: options.useOnlineTokens || false
     };
     nuxt.options.runtimeConfig.public.shopify = {
-      apiKey: options.apiKey
+      apiKey: options.apiKey,
+      authPagePath: options.authPage !== false ? "/auth" : "",
+      authPathPrefix: options.authPathPrefix || "/_shopify/auth",
+      navLinks: options.navLinks || []
     };
     nuxt.options.alias["#shopify/server"] = resolver.resolve("./runtime/server");
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
@@ -68,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({
@@ -115,13 +117,30 @@ export {}
       path: resolver.resolve("./runtime/middleware/shopify-auth"),
       global: false
     });
+    if (options.authPage !== false) {
+      extendPages((pages) => {
+        pages.push({
+          name: "shopify-auth-login",
+          path: "/auth",
+          file: options.authPage || resolver.resolve("./runtime/pages/auth-login.vue")
+        });
+      });
+    }
+    nuxt.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.plugins = nitroConfig.plugins || [];
+      nitroConfig.plugins.push(
+        resolver.resolve("./runtime/server/plugins/shopify-defaults")
+      );
+    });
     nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = nitroConfig.externals || {};
       nitroConfig.externals.inline = nitroConfig.externals.inline || [];
       nitroConfig.externals.inline.push(
         "@shopify/shopify-api",
-        "@shopify/shopify-api/adapters/node"
+        "@shopify/shopify-api/adapters/node",
+        "@shopify/shopify-app-session-storage-memory",
+        "isbot"
       );
     });
     nuxt.hook("prepare:types", ({ references }) => {

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/ShCheckbox.d.vue.ts

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

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

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