62
Props et events typés
Les props et events de chaque wrapper sont générés à partir du Custom Elements Manifest officiel de Shopify : vous bénéficiez d'une autocomplétion et d'une vérification de types conformes à l'API réelle du composant.
Des composants Vue 3 typés autour des web components Polaris de Shopify (s-button, s-text-field, s-modal, ...), sans design system spécifique à Vue à apprendre en plus.
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Wrappers Vue 3 pour Shopify Polaris
Tout Polaris. Rien à réapprendre.
Les props et events de chaque wrapper sont générés à partir du Custom Elements Manifest officiel de Shopify : vous bénéficiez d'une autocomplétion et d'une vérification de types conformes à l'API réelle du composant.
Champs de texte, cases à cocher, interrupteurs, listes déroulantes, listes de choix, sélecteurs de date et bien d'autres prennent en charge v-model nativement, associé à la bonne paire prop/event sous-jacente de chaque élément.
Les props inconnues sont transmises telles quelles via $attrs, et le contenu des slots est relayé à l'identique. Une version obsolète du wrapper ne casse jamais le code existant : il lui manque simplement les types des nouvelles fonctionnalités.
Les définitions de composants et de types sont générées directement à partir du Custom Elements Manifest de Shopify, ce qui maintient les wrappers alignés sur le runtime Polaris servi par le CDN.
Les web components Polaris de Shopify (<s-button>, <s-text-field>, <s-modal>, …) fonctionnent avec n'importe quel framework, mais dans un template Vue ce ne sont que des custom elements non typés : pas d'autocomplétion, pas de vérification des props et pas de v-model. polaris-vue-elements enveloppe chacun d'eux dans un composant Vue 3 léger, généré à partir du Custom Elements Manifest de Shopify, tandis que le runtime Polaris continue d'être chargé depuis le CDN de Shopify.
<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 composants. Un seul import.