62
Typed props & events
Every wrapper's props and events are generated from Shopify's official Custom Elements Manifest, so you get autocomplete and type-checking that matches the real component API.
Typed Vue 3 components around Shopify's Polaris web components (s-button, s-text-field, s-modal, ...) — no separate Vue-specific design system to learn.
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Vue 3 wrappers for Shopify Polaris
Everything Polaris. Nothing to relearn.
Every wrapper's props and events are generated from Shopify's official Custom Elements Manifest, so you get autocomplete and type-checking that matches the real component API.
Text fields, checkboxes, switches, selects, choice lists, date pickers and more all support v-model out of the box, mapped to the correct underlying prop/event pair for each element.
Unknown props pass straight through via $attrs, and slot content is forwarded verbatim. A stale wrapper version never breaks existing usage — it just lacks types for newer features.
Component and type definitions are generated directly from Shopify's Custom Elements Manifest, keeping the wrapper surface aligned with the Polaris runtime on the CDN.
Shopify's Polaris web components (<s-button>, <s-text-field>, <s-modal>, …) work in any framework, but in a Vue template they are untyped custom elements: no autocomplete, no prop checking, and no v-model. polaris-vue-elements wraps each one in a thin Vue 3 component generated from Shopify's Custom Elements Manifest, while the Polaris runtime keeps loading from Shopify's CDN.
<script setup lang="ts">
import { ref } from 'vue'
import { SButton, STextField } from 'polaris-vue-elements'
const name = ref('')
</script>
<template>
<STextField v-model="name" label="Store name" />
<SButton variant="primary">Save</SButton>
</template>62 components. One import.