62
Props e events tipados
As props e os events de cada wrapper são gerados a partir do Custom Elements Manifest oficial da Shopify, então você tem autocompletar e verificação de tipos que correspondem à API real do componente.
Componentes Vue 3 tipados em torno dos web components Polaris da Shopify (s-button, s-text-field, s-modal, ...), sem um design system específico de Vue para aprender.
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Wrappers de Vue 3 para Shopify Polaris
Tudo do Polaris. Nada para reaprender.
As props e os events de cada wrapper são gerados a partir do Custom Elements Manifest oficial da Shopify, então você tem autocompletar e verificação de tipos que correspondem à API real do componente.
Campos de texto, caixas de seleção, interruptores, listas suspensas, listas de opções, seletores de data e muito mais suportam v-model de forma nativa, mapeado para o par prop/event correto de cada elemento.
Props desconhecidas passam direto via $attrs, e o conteúdo dos slots é repassado sem alterações. Uma versão desatualizada do wrapper nunca quebra o uso existente: ela apenas não tem os tipos dos recursos mais novos.
As definições de componentes e de tipos são geradas diretamente a partir do Custom Elements Manifest da Shopify, mantendo os wrappers alinhados ao runtime do Polaris servido pelo CDN.
Os web components do Polaris da Shopify (<s-button>, <s-text-field>, <s-modal>, …) funcionam com qualquer framework, mas em um template Vue eles são custom elements sem tipos: sem autocompletar, sem verificação de props e sem v-model. O polaris-vue-elements envolve cada um em um componente Vue 3 leve, gerado a partir do Custom Elements Manifest da Shopify, enquanto o runtime do Polaris continua sendo carregado pelo CDN da 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 componentes. Um só import.