62
Typed props और events
हर wrapper के props और events Shopify के आधिकारिक Custom Elements Manifest से generate होते हैं, इसलिए आपको ऐसा autocomplete और type-checking मिलता है जो component के असली API से मेल खाता है।
Shopify के Polaris web components (s-button, s-text-field, s-modal, ...) पर बने typed Vue 3 components — सीखने के लिए कोई अलग Vue-specific design system नहीं।
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Shopify Polaris के लिए Vue 3 wrappers
पूरा Polaris। दोबारा कुछ सीखने की ज़रूरत नहीं।
हर wrapper के props और events Shopify के आधिकारिक Custom Elements Manifest से generate होते हैं, इसलिए आपको ऐसा autocomplete और type-checking मिलता है जो component के असली API से मेल खाता है।
Text fields, checkboxes, switches, selects, choice lists, date pickers और कई अन्य components में v-model पहले से काम करता है, और हर element के सही prop/event जोड़े से जुड़ा होता है।
अनजान props $attrs के ज़रिए सीधे आगे पहुँच जाते हैं, और slot content जैसा है वैसा ही forward होता है। पुराना wrapper version मौजूदा कोड को कभी नहीं तोड़ता — बस नए features के types उसमें नहीं होते।
Component और type definitions सीधे Shopify के Custom Elements Manifest से generate होती हैं, जिससे wrappers CDN पर चल रहे Polaris runtime के साथ मेल में रहते हैं।
Shopify के Polaris web components (<s-button>, <s-text-field>, <s-modal>, …) किसी भी framework में काम करते हैं, लेकिन Vue template में वे बिना types वाले custom elements होते हैं: न autocomplete, न props की जाँच, और न v-model। polaris-vue-elements हर एक को Shopify के Custom Elements Manifest से generate किए गए एक हल्के Vue 3 component में लपेटता है, जबकि Polaris runtime पहले की तरह Shopify के CDN से load होता रहता है।
<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। एक ही import।