Skip to main content

Set up with your coding agent​

Terminal
claude plugin marketplace add reactive/data-client --scope project \
  --sparse .claude-plugin .agents/skills
claude plugin install data-client@data-client --scope project
Run in your terminal
Copy prompt for Claude Code

Whichever you use, your agent runs Data Client's setup skill, which installs the packages, wires up the provider and links the skills the packages ship, so your agent knows the current APIs, like real-time managers and test fixtures. That's the whole setup, so you can go straight to Define Data.

Set up by hand​

These steps are the same setup without an agent. If your agent ran the setup, skip them: it already did every one.

Install the plugin​

Install the Vue plugin when creating your app.

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

Link your agent's skills​

The packages ship skills for your coding agent, matched to the version you installed. Link them so Claude Code, Cursor and Codex load them, and commit the links:

npx --no data-client-skills
Run in your terminal

Run it again after adding, removing or upgrading @data-client packages. See Agent Skills for details.

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.