shopify-nuxt 0.0.11 → 0.0.13

package/README.md

@@ -16,6 +16,26 @@ It builds on the `@shopify/shopify-api` package and creates a Nuxt module layer
 
 > **Note**: this package will enable your app's backend to work with Shopify APIs, and by default it will behave as an [embedded app](https://shopify.dev/docs/apps/auth/oauth/session-tokens). It uses the CDN-based [Shopify App Bridge](https://shopify.dev/docs/apps/tools/app-bridge) for frontend authentication.
 
+## How is this different from `@nuxtjs/shopify`?
+
+[`@nuxtjs/shopify`](https://shopify.nuxtjs.org) and `shopify-nuxt` solve completely different problems — you may even use both in the same project.
+
+|                               | [`@nuxtjs/shopify`](https://shopify.nuxtjs.org) | `shopify-nuxt` (this package)               |
+| ----------------------------- | ----------------------------------------------- | ------------------------------------------- |
+| **Use case**                  | Headless storefront                             | Shopify admin app (embedded)                |
+| **Who it's for**              | Merchants building custom storefronts           | Developers building Shopify apps            |
+| **Authentication**            | Static access token in config                   | OAuth + per-merchant session token exchange |
+| **Runs inside Shopify Admin** | No                                              | Yes (App Bridge iframe)                     |
+| **App Bridge**                | No                                              | Yes — CDN-based, auto-injected              |
+| **Webhooks**                  | No                                              | Yes — HMAC-verified                         |
+| **Billing API**               | No                                              | Yes                                         |
+| **Per-shop session storage**  | No                                              | Yes — pluggable adapters                    |
+| **Equivalent to**             | Shopify Hydrogen / storefront SDKs              | `@shopify/shopify-app-react-router`         |
+
+**Use `@nuxtjs/shopify`** if you want to build a custom Nuxt storefront that queries products, collections, and customer data from a Shopify store using the Storefront or Admin API with a static token.
+
+**Use `shopify-nuxt`** if you are building a Shopify app — something that runs inside the Shopify Admin, authenticates merchants via OAuth, handles session tokens, manages webhooks, and optionally charges merchants via the Billing API.
+
 ## Requirements
 
 To follow these usage guides, you will need to:
@@ -283,21 +303,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>
+```
+
+With generic types for full type safety:
+
+```vue
+<script setup lang="ts">
+interface ShopData {
+  shop: { name: string; currencyCode: string }
+}
 
-const { data: products } = await useAsyncData(
-  'products',
-  () => shopifyFetch('/api/products'),
+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
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-nuxt",
   "configKey": "shopify",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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/composables/useShopifyFetch.d.ts

@@ -1,13 +1,12 @@
 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;
+type QueryParams = Record<string, string | number | boolean | null | undefined>;
+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;
+    query?: QueryParams;
+}): Promise<{
+    data: ShopifyFetchData<T, R, Extract<Lowercase<M>, RouterMethod>>;
+    response: Response;
+}>;
 export {};

package/dist/runtime/composables/useShopifyFetch.js

@@ -1,52 +1,61 @@
 import { useNuxtApp, useRequestEvent } from "#app";
-export function useShopifyFetch() {
+export async function useShopifyFetch(url, options) {
+  const { query, ...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,
+      query
     });
+    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 };
+  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}`);
+  let resolvedUrl = url;
+  if (query) {
+    const params = new URLSearchParams();
+    for (const [key, value] of Object.entries(query)) {
+      if (value !== null && value !== void 0) {
+        params.set(key, String(value));
+      }
     }
-    return { data: await response.text(), response };
+    const qs = params.toString();
+    if (qs) resolvedUrl += (resolvedUrl.includes("?") ? "&" : "?") + qs;
+  }
+  const fetchResponse = await fetch(resolvedUrl, {
+    ...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/server/utils/authenticate-admin.d.ts

@@ -1,5 +1,6 @@
 import type { H3Event } from 'h3';
 import type { AdminContext } from '../../types.js';
+import type { JwtPayload } from '@shopify/shopify-api';
 /**
  * Authenticate an admin request and return an authenticated admin context.
  *
@@ -14,4 +15,4 @@ import type { AdminContext } from '../../types.js';
  * })
  * ```
  */
-export declare function useShopifyAdmin(event: H3Event): Promise<AdminContext>;
+export declare function useShopifyAdmin<T extends object = JwtPayload>(event: H3Event): Promise<AdminContext<T>>;

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/dist/runtime/types.d.ts

@@ -87,13 +87,13 @@ export interface ShopifyRuntimeConfig {
     /** Billing configuration */
     billing?: Record<string, any>;
 }
-export interface AdminContext {
+export interface AdminContext<T extends object = JwtPayload> {
     /** The authenticated session */
     session: Session;
     /** Admin API client (graphql + rest) */
     admin: AdminApiContext;
     /** The decoded session token (embedded apps only) */
-    sessionToken?: JwtPayload;
+    sessionToken?: T;
     /** Billing helpers */
     billing: BillingContext;
     /** CORS header helper */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-nuxt",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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": {