62
Props y events tipados
Las props y los events de cada wrapper se generan a partir del Custom Elements Manifest oficial de Shopify, así que obtienes autocompletado y comprobación de tipos que coinciden con la API real del componente.
Componentes de Vue 3 tipados en torno a los web components Polaris de Shopify (s-button, s-text-field, s-modal, ...), sin un design system específico de Vue que aprender.
<STextField v-model="name" />
<SButton variant="primary">Save</SButton>Wrappers de Vue 3 para Shopify Polaris
Todo Polaris. Nada que volver a aprender.
Las props y los events de cada wrapper se generan a partir del Custom Elements Manifest oficial de Shopify, así que obtienes autocompletado y comprobación de tipos que coinciden con la API real del componente.
Campos de texto, casillas de verificación, interruptores, listas desplegables, listas de opciones, selectores de fecha y más admiten v-model de forma nativa, asociado al par prop/event subyacente correcto de cada elemento.
Las props desconocidas se transmiten tal cual mediante $attrs, y el contenido de los slots se reenvía sin cambios. Una versión desactualizada del wrapper nunca rompe el código existente: simplemente le faltan los tipos de las funciones más recientes.
Las definiciones de componentes y tipos se generan directamente a partir del Custom Elements Manifest de Shopify, lo que mantiene los wrappers alineados con el runtime de Polaris servido desde el CDN.
Los web components de Polaris de Shopify (<s-button>, <s-text-field>, <s-modal>, …) funcionan con cualquier framework, pero en un template de Vue son custom elements sin tipos: sin autocompletado, sin comprobación de props y sin v-model. polaris-vue-elements envuelve cada uno en un componente ligero de Vue 3 generado a partir del Custom Elements Manifest de Shopify, mientras el runtime de Polaris se sigue cargando desde el CDN de 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. Un solo import.