Saltar al contenido principal
nota

El original en inglés cambió después de esta traducción, así que puede estar desactualizada.

Con tu agente de programación​

Primero instala las skills de Data Client para tu agente de programación. Sin ellas, los agentes aciertan con lo básico pero se pierden el resto, como los managers en tiempo real y los fixtures de prueba.

Terminal
claude plugin marketplace add reactive/data-client
claude plugin install data-client@data-client
Ejecútalo en tu terminal

Luego dile a tu agente:

Copiar el prompt para tu agente de programación

Instala el plugin​

Instala el plugin de Vue al crear tu aplicación.

npm install --save @data-client/vue @data-client/rest
Ejecútalo en tu terminal
main.ts
import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';
import App from './App.vue';

const app = createApp(App);
app.use(DataClientPlugin);
app.mount('#app');

app.use(DataClientPlugin, options) puede sobrescribir opcionalmente managers, initialState, Controller y gcPolicy. Consulta DataClientPlugin para ver todas las opciones.

Tu agente de programación también puede cargar las skills que incluyen estos paquetes, ajustadas a la versión que instalaste, con TanStack Intent:

npm install -D @tanstack/intent
npx intent install
Ejecútalo en tu terminal
Siguiente: Definir los datos »

Ejemplo​

Explora el ejemplo vue-todo-app

Abrir en StackBlitzVer código fuente

Más demos

Herramientas compatibles​

TypeScript 4.0+

TypeScript es opcional, pero requiere al menos la versión 4.0 y strictNullChecks para una verificación de tipos completa.

@data-client/vue necesita TypeScript 4.5 o posterior, ya que los propios tipos de Vue lo requieren.

Compatibilidad con navegadores antiguos

Si tu aplicación apunta a navegadores antiguos (de hace unos años o más), asegúrate de cargar polyfills. Normalmente esto se hace con @babel/preset-env useBuiltIns: 'entry', junto con la importación de core-js en el punto de entrada de tu aplicación.

Así te aseguras de que solo se incluyan en el bundle de tu aplicación los polyfills necesarios para los navegadores que quieres soportar.

Por ejemplo, TypeError: Object.hasOwn is not a function

Compatibilidad con Internet Explorer

Si ves Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', sigue las instrucciones para agregar compatibilidad con navegadores heredados a los paquetes

Vue 3

@data-client/vue es compatible con Vue 3 y está construido sobre la Composition API.