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 の組み合わせにマッピングされます。
未知の props は $attrs を通じてそのまま渡され、スロットの内容もそのまま転送されます。古いバージョンの wrapper でも既存のコードが壊れることはなく、新しい機能の型がないだけです。
コンポーネントと型の定義は Shopify の Custom Elements Manifest から直接生成されるため、wrapper は CDN 上の Polaris runtime と常に一致します。
Shopify の Polaris web components （<s-button>、<s-text-field>、<s-modal> など）はどのフレームワークでも動作しますが、Vue の テンプレートでは型のないカスタム要素にすぎません。補完も、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 は一度だけ。