Skip to main content

With your coding agent​

First install Data Client's skills for your coding agent. Without them, agents get the basics right but miss the rest, like real-time managers and test fixtures.

claude plugin marketplace add reactive/data-client
claude plugin install vue@data-client

Then tell your agent:

Copy prompt for your coding agent

Install the plugin​

Install the Vue plugin when creating your app.

npm install --save @data-client/vue @data-client/rest
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) optionally overrides managers, initialState, Controller, and gcPolicy. See DataClientPlugin for all options.

Your coding agent can also load the skills these packages ship, matched to the version you installed, with TanStack Intent:

npm install -D @tanstack/intent
npx intent install
Next: Define Data »

Example​

Explore the vue-todo-app example

Open in StackBlitzView source

More Demos

Supported Tools​

TypeScript 4.0+

TypeScript is optional, but requires at least version 4.0 and strictNullChecks for full type enforcement.

@data-client/vue needs TypeScript 4.5 or later, since Vue's own types do.

Older browser support

If your application targets older browsers (a few years or more), be sure to load polyfills. Typically this is done with @babel/preset-env useBuiltIns: 'entry', coupled with importing core-js at the entrypoint of your application.

This ensures only the needed polyfills for your browser support targets are included in your application bundle.

For instance TypeError: Object.hasOwn is not a function

Internet Explorer support

If you see Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', follow the instructions to add legacy browser support to packages

Vue 3

@data-client/vue supports Vue 3 and is built on the Composition API.