SPage <s-page>

The top-level page layout, with a heading, page actions and content areas. SPage is the typed Vue 3 wrapper for Shopify's Polaris <s-page> web component.

import { SPage } from 'polaris-vue-elements'

Best practices

• Give every page a title. Set heading to a title that describes the page the merchant is on.
• Add breadcrumbs inside a flow. When the page is one step in a larger flow, put links back in the breadcrumb-actions slot.
• Keep header actions page-wide. Only place actions in the header when they apply to the whole page, not to one part of it.
• Limit the number of actions. Use at most one primary action and three secondary actions on a page.
• Leave the bottom of the page free of actions. Don't place any actions at the end of the page.

<SPage heading="Edit product">
  <template #breadcrumb-actions>
    <SLink href="/products">Products</SLink>
  </template>
  <template #primary-action>
    <SButton variant="primary">Save</SButton>
  </template>
  <template #secondary-actions>
    <SButton>Duplicate</SButton>
    <SButton>Archive</SButton>
  </template>
  <!-- … -->
</SPage>

See Shopify's best practices for <s-page> for the full guidance.

Example

No orders have been placed yet.Create order

<script setup>
import { SPage, SSection, SParagraph, SButton } from 'polaris-vue-elements'
</script>

<template>
  <SPage heading="Orders">
    <template #primary-action>
      <SButton variant="primary">Create order</SButton>
    </template>

    <SSection heading="Recent activity">
      <SParagraph>No orders have been placed yet.</SParagraph>
    </SSection>
  </SPage>
</template>

Props

Prop	Type	Description
heading	string	The main page heading
inlineSize	"base" | "small" | "large"	The inline size of the page - base corresponds to a set default inline size - large full width with whitespace

Slots

Slot	Description
default	The main page content displayed within the page component, which serves as the primary container for the page's information and interface elements.
aside	The content to display in the aside section of the page. This slot is only rendered when inlineSize is "base".
breadcrumb-actions	The navigation back actions for the page. Only accepts link components.
primary-action	The primary action for the page. Only accepts a single button component with a variant of primary.
secondary-actions	The secondary actions for the page. Only accepts button group and button components with a variant of secondary or auto.
supplemental-start	A slot for content that comes before the main content, such as an s-banner.