Polaris Components

Overview

This module provides Vue wrapper components for Shopify Polaris web components. Use the Sh-prefixed wrappers instead of raw s-* web components — they provide typed props with autocomplete, v-model support for form components, and work seamlessly with Vue's reactivity system.

All Sh* components are auto-imported — no manual imports needed.

Component Prefix

All components use a configurable prefix (default: Sh). You can change it via the componentPrefix module option:

// nuxt.config.ts
export default defineNuxtConfig({
  shopify: {
    componentPrefix: 'Shopify' // <ShopifyButton>, <ShopifyApp>, etc.
  }
})

The examples below use the default Sh prefix.

Basic Example

<template>
  <ShPage heading="Products">
    <ShStack gap="base">
      <ShButton variant="primary" @click="save">Save</ShButton>
      <ShButton @click="cancel">Cancel</ShButton>
    </ShStack>

    <ShBanner heading="Welcome" tone="info" dismissible>
      Start by adding your first product.
    </ShBanner>

    <ShTextField
      v-model="title"
      label="Product title"
      placeholder="Enter product title"
    />

    <ShSelect
      v-model="status"
      label="Status"
      :options="[
        { label: 'Active', value: 'active' },
        { label: 'Draft', value: 'draft' }
      ]"
    />
  </ShPage>
</template>

App Components

<ShApp>

Wrap your app pages with <ShApp> to automatically render the App Bridge navigation menu from your module config. See ShApp reference.

<template>
  <ShApp>
    <slot />
  </ShApp>
</template>

<ShLoadingIndicator>

Bridges the Nuxt loading indicator with the Shopify Admin loading bar. See ShLoadingIndicator reference.

<template>
  <ShLoadingIndicator>
    <ShPage title="Products">
      <!-- content -->
    </ShPage>
  </ShLoadingIndicator>
</template>

Available Components

Each Polaris component maps to its web component counterpart (e.g., <ShButton> → <s-button>). Browse the full reference with props, events, and slots:

Polaris Modal (ShModal)

ShModal wraps the Polaris <s-modal> component — it renders inside your app's iframe. Open and close it using commandFor / command attributes:

<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>

App Bridge UI Components (ShUi*)

In addition to the Polaris Sh* components (rendered inside your iframe), the module provides ShUi* wrappers for App Bridge UI web components (ui-*). These render outside the app iframe in the Shopify Admin shell.

These are the Vue replacements for @shopify/app-bridge-react components (Modal, TitleBar, SaveBar, NavMenu).

Polaris (Sh*) vs App Bridge (ShUi*)

For detailed props, events, and usage examples, see the individual component pages:

• <ShUiModal> — Full-screen modal outside the iframe
• <ShUiTitleBar> — Admin page title bar with action buttons
• <ShUiSaveBar> — Contextual save/discard bar
• <ShUiNavMenu> — Admin sidebar navigation menu

Related App Bridge APIs

All ShUi* components can be controlled programmatically via the shopify global (accessed with useAppBridge()):

See the full list at App Bridge APIs and web methods.