shopify-nuxt 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yanuar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,30 @@ 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
+
+| 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                  |
+
+## Authenticating admin requests
 
-Use `useShopifyAdmin()` in your server API routes to authenticate requests from the Shopify admin:
+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 +120,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 +190,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,21 +273,32 @@ 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
-const shopifyFetch = useShopifyFetch()
-const { data } = await shopifyFetch('/api/products')
+// Get the current shop
+const shop = shopify.config.shop
 </script>
+```
 
-<template>
-  <ShopifyAppProvider>
-    <!-- Your app content -->
-  </ShopifyAppProvider>
-</template>
+### Authenticated fetch
+
+Use `useShopifyFetch()` for client-side API calls that automatically include the session token:
+
+```vue
+<script setup>
+const shopifyFetch = useShopifyFetch()
+
+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.
+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>
@@ -156,17 +313,57 @@ 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`
+
+## 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:
 
@@ -181,11 +378,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
 
@@ -204,14 +405,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
 
@@ -225,8 +451,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:
@@ -243,6 +499,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.1",
+  "version": "0.0.3",
   "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,13 +28,16 @@ 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"
     };
     nuxt.options.alias["#shopify/server"] = resolver.resolve("./runtime/server");
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
     addImportsDir(resolver.resolve("./runtime/composables"));
     addComponentsDir({
-      path: resolver.resolve("./runtime/components")
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false
     });
     nuxt.hook("app:resolve", () => {
       nuxt.options.app.head = nuxt.options.app.head || {};
@@ -114,13 +116,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/polaris/ShAvatar.vue

@@ -1,15 +1,17 @@
 <template>
-  <s-avatar v-bind="$attrs">
+  <s-avatar v-bind="polarisAttrs">
     <slot />
   </s-avatar>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShAvatar", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   initials: { type: String, required: false },
   src: { type: String, required: false },
   size: { type: String, required: false },
   alt: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

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

@@ -1,16 +1,18 @@
 <template>
-  <s-badge v-bind="$attrs">
+  <s-badge v-bind="polarisAttrs">
     <slot />
   </s-badge>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShBadge", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   content: { type: String, required: false },
   progress: { type: String, required: false },
   tone: { type: String, required: false },
   icon: { type: String, required: false },
   size: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

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

@@ -1,15 +1,17 @@
 <template>
-  <s-banner v-bind="$attrs">
+  <s-banner v-bind="polarisAttrs">
     <slot />
   </s-banner>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShBanner", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   heading: { type: String, required: false },
   tone: { type: String, required: false },
   hidden: { type: Boolean, required: false },
   dismissible: { type: Boolean, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

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

@@ -1,12 +1,13 @@
 <template>
-  <s-box v-bind="$attrs">
+  <s-box v-bind="polarisAttrs">
     <slot />
   </s-box>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShBox", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   accessibilityRole: { type: String, required: false },
   background: { type: String, required: false },
   blockSize: { type: String, required: false },
@@ -32,4 +33,5 @@ defineProps({
   accessibilityVisibility: { type: String, required: false },
   display: { type: String, required: false }
 });
+const polarisAttrs = usePolarisAttrs(props);
 </script>

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

@@ -13,11 +13,19 @@ type __VLS_Props = {
     commandFor?: string;
     interestFor?: string;
 };
-declare var __VLS_8: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+    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;
+    onFocus?: ((event: FocusEvent) => 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;

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

@@ -1,12 +1,18 @@
 <template>
-  <s-button v-bind="$attrs">
+  <s-button
+    v-bind="polarisAttrs"
+    @click="emit('click', $event)"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+  >
     <slot />
   </s-button>
 </template>
 
 <script setup>
+import { usePolarisAttrs } from "./utils";
 defineOptions({ name: "ShButton", inheritAttrs: false });
-defineProps({
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { type: String, required: false },
   loading: { type: Boolean, required: false },
@@ -21,4 +27,6 @@ defineProps({
   commandFor: { type: String, required: false },
   interestFor: { type: String, required: false }
 });
+const emit = defineEmits(["click", "focus", "blur"]);
+const polarisAttrs = usePolarisAttrs(props);
 </script>