62
Typisierte Props & Events
Props und Events jedes Wrappers werden aus dem offiziellen Custom Elements Manifest von Shopify generiert. So erhalten Sie Autovervollständigung und Typprüfung, die der echten Komponenten-API entsprechen.
Typisierte Vue-3-Komponenten für die Polaris Web Components von Shopify (s-button, s-text-field, s-modal, ...), ohne ein separates Vue-spezifisches Design-System lernen zu müssen.
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Vue-3-Wrapper für Shopify Polaris
Alles von Polaris. Nichts neu zu lernen.
Props und Events jedes Wrappers werden aus dem offiziellen Custom Elements Manifest von Shopify generiert. So erhalten Sie Autovervollständigung und Typprüfung, die der echten Komponenten-API entsprechen.
Textfelder, Checkboxen, Switches, Selects, Auswahllisten, Datumsauswahlen und mehr unterstützen v-model direkt, jeweils abgebildet auf das passende Prop/Event-Paar des zugrunde liegenden Elements.
Unbekannte Props werden über $attrs direkt durchgereicht, Slot-Inhalte unverändert weitergegeben. Eine veraltete Wrapper-Version bricht bestehenden Code nie, ihr fehlen lediglich Typen für neuere Funktionen.
Komponenten- und Typdefinitionen werden direkt aus dem Custom Elements Manifest von Shopify generiert, sodass die Wrapper stets zur Polaris-Runtime auf dem CDN passen.
Die Polaris Web Components von Shopify (<s-button>, <s-text-field>, <s-modal>, …) funktionieren in jedem Framework, sind in einem Vue-Template aber untypisierte Custom Elements: keine Autovervollständigung, keine Prop-Prüfung und kein v-model. polaris-vue-elements umschließt jedes davon mit einer schlanken Vue-3-Komponente, generiert aus dem Custom Elements Manifest von Shopify, während die Polaris-Runtime weiterhin vom CDN von Shopify geladen wird.
<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 Komponenten. Ein Import.