62
타입이 지정된 props & events
모든 wrapper의 props와 events는 Shopify의 공식 Custom Elements Manifest에서 생성되므로, 실제 컴포넌트 API와 일치하는 자동 완성과 타입 검사를 사용할 수 있습니다.
Shopify Polaris web components(s-button, s-text-field, s-modal, ...)를 감싼 타입이 지정된 Vue 3 컴포넌트로, Vue 전용 디자인 시스템을 따로 배울 필요가 없습니다.
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Shopify Polaris를 위한 Vue 3 wrapper
Polaris의 모든 것. 새로 배울 것은 없습니다.
모든 wrapper의 props와 events는 Shopify의 공식 Custom Elements Manifest에서 생성되므로, 실제 컴포넌트 API와 일치하는 자동 완성과 타입 검사를 사용할 수 있습니다.
텍스트 필드, 체크박스, 스위치, 셀렉트, 선택 목록, 날짜 선택기 등이 모두 기본으로 v-model을 지원하며, 각 요소에 맞는 prop/event 쌍에 올바르게 매핑됩니다.
알 수 없는 prop은 $attrs를 통해 그대로 전달되고, slot 콘텐츠도 그대로 전달됩니다. 오래된 wrapper 버전이 기존 코드를 깨뜨리는 일은 없으며, 새 기능의 타입만 없을 뿐입니다.
컴포넌트와 타입 정의는 Shopify의 Custom Elements Manifest에서 직접 생성되므로, wrapper가 항상 CDN의 Polaris runtime과 일치합니다.
Shopify의 Polaris web components (<s-button>, <s-text-field>, <s-modal>, …)는 어떤 프레임워크에서도 동작하지만, Vue 템플릿에서는 타입이 없는 custom element일 뿐입니다. 자동 완성도, prop 검사도, v-model도 없습니다. polaris-vue-elements는 각 요소를 Shopify의 Custom Elements Manifest에서 생성한 얇은 Vue 3 컴포넌트로 감싸며, Polaris runtime은 계속 Shopify의 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개. import 한 번.