# Getting Started with Reactive Data Client

> **Tip: Use Agent Skills**
>
> Prefer to scaffold via your AI agent? See [Agent Skills](https://dataclient.io/vue/getting-started/agent-skills.md) and run `/data-client-setup`.

## Install the plugin {#add-provider-at-top-level-component}

Install the [Vue plugin](https://vuejs.org/guide/reusability/plugins.html) when creating your app.

```bash
npm install @data-client/vue @data-client/rest
```

```ts title="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`](https://dataclient.io/vue/api/getDefaultManagers.md), `initialState`, `Controller`, and `gcPolicy`. See [DataClientPlugin](https://dataclient.io/vue/api/DataClientPlugin.md) for all options.

[Next: Define Data »](https://dataclient.io/vue/getting-started/resource.md)

## Example

Example app: [vue-todo-app](https://github.com/reactive/data-client/tree/master/examples/vue-todo-app) ([`src/main.ts`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/main.ts), [`src/pages/UserTodos.vue`](https://github.com/reactive/data-client/blob/master/examples/vue-todo-app/src/pages/UserTodos.vue))

## Supported Tools

<details>

<summary>TypeScript 4.0+</summary>

TypeScript is optional, but requires at least version [4.0](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types) and [strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks) for full type enforcement.

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

</details>

<details>

<summary>Older browser support</summary>

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'](https://babeljs.io/docs/en/babel-preset-env#usebuiltins),
coupled with importing [core-js](https://www.npmjs.com/package/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`

</details>

<details>

<summary>Internet Explorer support</summary>

If you see `Uncaught TypeError: Class constructor Resource cannot be invoked without 'new'`,
follow the instructions to [add legacy browser support to packages](https://dataclient.io/vue/guides/legacy-browser.md)

</details>

<details>

<summary>Vue 3</summary>

`@data-client/vue` supports Vue 3 and is built on the [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html).

</details>