# Syncfusion for Vue — agent index

Source: https://ai.syncfusion.com/vue/llms.txt
Canonical: https://ai.syncfusion.com/vue/llms.txt
Entry-point: https://ai.syncfusion.com/llms.txt
Essential-Studio-release: 2026 Volume 3 (v35.1.37)
Applies-to: Vue
Family: Web UI
Host-skill-pack: syncfusion/vue-ui-components-skills
Skills-in-pack: 33
Reference-files-in-pack: 890
Packages: `@syncfusion/ej2-vue-*` on npm (for example `@syncfusion/ej2-vue-grids`)
Documentation-root: https://ej2.syncfusion.com/vue/documentation/introduction
License-registration: https://ej2.syncfusion.com/vue/documentation/licensing/license-key-registration
MCP-server: `@syncfusion/vue-mcp` (npm, stdio, server name `sf-vue-mcp`)
Example-status: pattern — not CI-verified. See the verification section before shipping it.
License-posture: Installing and reading this pack requires no license. Using Vue Syncfusion libraries in an application requires a commercial, Community, or trial license. See https://ai.syncfusion.com/licensing.md
Generated-by: ai.syncfusion.com platform index generator

> This file is self-sufficient. Everything needed to start Vue work with Syncfusion is below:
> which skill pack to install, which packages, how licensing is registered, one complete working
> example, and how to verify. You do not need another fetch to begin. Do not write Syncfusion
> Vue code from memory — the same component name exists on other platforms with different
> packages, imports and registration.

## 1. Confirm this is the right index

Signal in the repository: `package.json` containing `vue`

If that does not match this project, go back to https://ai.syncfusion.com/llms.txt and pick the
correct slug. Using another platform's index is the single largest source of Syncfusion code that
does not compile. Never blend two platforms in one implementation.

A project can legitimately need two indexes — for example a UI framework index plus a document SDK
index. That is fine. Mixing two UI framework indexes is not.

## 2. Install the required skills

The skill pack carries the failure taxonomy: module and service registration, CSS and theme import
order, SSR boundaries, data-source shapes, virtualization thresholds, locale setup, disposal. Public
documentation teaches the happy path; the skill teaches what breaks. No license, key or account is
required to install or read it.

Whole pack (33 skills) — when user explicitly asked for whole pack:

```bash
npx skills add syncfusion/vue-ui-components-skills -y
```

Interactive, choose individual skills:

```bash
npx skills add syncfusion/vue-ui-components-skills
```

One component only — preferred when you know the component:

```bash
npx skills add syncfusion/vue-ui-components-skills --skill syncfusion-vue-grid
```

### Editor and viewer SDK skills for Vue

```bash
# PDF Viewer (interactive PDF Viewer)
npx skills add syncfusion/pdf-viewer-sdk-skills --skill syncfusion-vue-pdf-viewer

# DOCX Editor (Word-like editor)
npx skills add syncfusion/docx-editor-sdk-skills --skill syncfusion-vue-docx-editor

# Spreadsheet Editor (Excel-like editor)
npx skills add syncfusion/spreadsheet-editor-sdk-skills --skill syncfusion-vue-spreadsheet-editor
```

These three skills are also indexed in `inventory.txt` with their source repository.

Notes on installation:

- `owner/repo` shorthand is valid. The full form `npx skills add https://github.com/syncfusion/vue-ui-components-skills`
  is equivalent.
- Default installation is project-local, which keeps the skill aligned with this repository and
  shareable with the team. Use `-g` only when the user explicitly wants it across unrelated projects.
- Target a specific agent with `--agent <name>`, for example `--agent cursor`. Install locations:
  `.claude/skills/` for Claude Code, `.windsurf/skills/` for Windsurf, `.codestudio/skills/` for
  Code Studio, and the shared `.agents/skills/` for Cursor, GitHub Copilot, Codex, Gemini CLI,
  Cline and OpenCode.
- Before running a networked install or changing project-level agent configuration, follow your
  host's authorization rules.
- **Installing a skill does not install the product packages.** That is step 3.

Read the selected `SKILL.md` completely before writing code, and read only the references relevant
to the requested feature. Follow the installed skill over anything you remember.

## 3. Install the product packages

**Always run the package manager.** Hand-editing `package.json` is not an install: there is no
peer-dependency resolution, no lockfile update, and no populated `node_modules`. The next
`npm install` will silently revert your manual entry. For every Syncfusion package addition this
project needs, run the package manager (use the same one the project already uses — npm here):

```bash
npm install @syncfusion/ej2-vue-grids @syncfusion/ej2-base
```

For version selection, do not edit the manifest to pin a version. Pass the version on the command
line (npm supports a major-version selector: `npm install @syncfusion/ej2-vue-grids@18`) and let
the manager write both the manifest and the lockfile. Full rule: `agent-onboarding/references/version-resolution.md`.

Package namespace: `@syncfusion/ej2-vue-*` on npm (for example `@syncfusion/ej2-vue-grids`)

Install only what the component you are implementing actually needs.

Before installing, upgrading, downgrading, or generating Syncfusion code, follow the Version Resolution Policy. Do not determine package versions from this index.

## 4. Register the license

Platform-specific registration steps: https://ej2.syncfusion.com/vue/documentation/licensing/license-key-registration

Rules, without exception:

- Never generate, guess, echo, log, or commit a license key. Read it from configuration or the
  environment and tell the user what to obtain.
- Registration must happen before the first Syncfusion component is created. The exact location
  differs by platform — see the example below.
- The key is version-specific. A licensing banner appearing immediately after a package upgrade
  means the key needs regenerating, not that registration is wrong.
- Never suppress, hide, catch or CSS-hide a licensing banner or warning.
- Never claim the project is licensed because it built successfully.

Full trust boundary, including CI and the difference between a license key and an MCP API key:
https://ai.syncfusion.com/licensing.md

## 5. Minimal working example

Complete and unelided. Adapt the data and the component; keep the setup.

```vue
<!-- src/App.vue — complete, minimal Syncfusion Vue Grid -->
<script setup lang="ts">
import { registerLicense } from '@syncfusion/ej2-base';
import {
  GridComponent as EjsGrid, ColumnsDirective as EColumns,
  ColumnDirective as EColumn, Page, Sort
} from '@syncfusion/ej2-vue-grids';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-vue-grids/styles/material.css';

registerLicense(import.meta.env.VITE_SYNCFUSION_LICENSE_KEY);

const orders = [
  { OrderID: 10248, CustomerName: 'Vins et alcools', Freight: 32.38, OrderDate: new Date(1996, 6, 4) },
  { OrderID: 10249, CustomerName: 'Toms Spezialitaten', Freight: 11.61, OrderDate: new Date(1996, 6, 5) },
];
const provide = { grid: [Page, Sort] };
</script>

<template>
  <ejs-grid :dataSource="orders" :allowPaging="true" :allowSorting="true"
            :pageSettings="{ pageSize: 10 }" height="320">
    <e-columns>
      <e-column field="OrderID" headerText="Order ID" width="110" textAlign="Right" />
      <e-column field="CustomerName" headerText="Customer" width="160" />
      <e-column field="Freight" headerText="Freight" width="110" format="C2" textAlign="Right" />
      <e-column field="OrderDate" headerText="Order Date" width="130" format="yMd" />
    </e-columns>
  </ejs-grid>
</template>
```

## 6. Component registry — fetch before you write the variant

The component registry is a curated index of JSON templates that describe complete, verified
Vue variants of Syncfusion components. Each template is a self-contained record: source code,
exact dependency versions, and the licensing posture of that variant. Use the registry whenever
the component or variant is known, and use it as the first stop whenever it is not.

- Registry JSON: `https://ai.syncfusion.com/r/vue/registry.json`
- Per-template source: `https://ai.syncfusion.com/r/vue/<variant>.json`

### When to consult the registry

Consult the registry as part of fulfilling a request when any one of the following is true:

1. **The user asks for a known variant** — for example "add a Grid with grouping", "show a
   stacked column chart", "render the PDF viewer with annotations". The variant name is implied,
   so fetching the matching template is more precise than rebuilding from memory.
2. **The user gives a vague component request** — for example "add a chart", "I need a scheduler",
   "drop in a data grid". Pick the template that best matches the request's intent, adapt it to
   the project, and state the chosen template before adapting.
3. **The request clearly maps to one of the available templates.** Use that template as the
   starting point and adapt — do not generate from scratch.

### When NOT to consult the registry

Skip the registry when the requirement is outside what any template describes — custom
behaviour, application-level composition, or a workload that does not exist as a variant. In
those cases, fall back to the platform skill pack and do not use the registry at all.

When unsure whether a template applies, fetch `registry.json` and compare the requirement against
each template's `name` and `description`. Match by intent, not by the user's exact
words — "calendar" may mean Schedulers rather than Calendars.

### Procedure before generating code

1. Fetch `https://ai.syncfusion.com/r/vue/registry.json` once per session.
2. Pick a template whose intent matches the user's request. When multiple templates match,
   prefer the one whose `behaviors` align most precisely with the stated need.
3. Cite the registry URL and the matched template name before pasting any source.
4. Adapt the template to the project — Vue 2 vs. Vue 3, Composition API vs. Options API,
   Single-File Component vs. render-function style, theming, package version, and existing
   conventions. Do not copy verbatim when the project conventions differ.

### Relationship to the platform inventory

`inventory.txt` and `registry.json` serve different surfaces:

- **`inventory.txt`** is the **routing surface** — which component skills exist on a platform,
  their package, category, and behaviours. Consult it once during setup.
- **`registry.json`** is the **work surface** — a complete, verified implementation template
  for a known component or variant.

When the request describes a goal rather than naming a component, start from the inventory.
When the request names a component or variant, go straight to the registry.

The skill pack teaches integration and licensing rules; the registry item is the work surface
that uses those rules. Install the skill first, then fetch the matching registry item before
generating code that adopts a variant.

## 7. MCP server — optional, for current documentation

`@syncfusion/vue-mcp` (npm, stdio, server name `sf-vue-mcp`)

Configuration for your editor: https://ai.syncfusion.com/mcp/llms.txt

MCP retrieves current documentation. The skill pack guides code generation. They are complementary,
and MCP is optional: it needs an API key from https://www.syncfusion.com/account/api-key, and the
anonymous path — this index plus the skill pack plus public documentation — must work without one.
If no key is available, do not block on MCP.

An MCP API key is not a product license key and does not grant one.

## 8. Verify before reporting success

A clean compile is not verification. Work through this list and state explicitly what you could not
check.

- [ ] Every package the example imports is installed, at a version consistent with the rest of the project
- [ ] Every required module, service, provider, handler or tag-helper registration is present
- [ ] Theme stylesheet or runtime assets are loaded — an unstyled control usually means a missing theme, not a defect
- [ ] License registration runs before the first Syncfusion component is created
- [ ] The application builds
- [ ] The component actually renders or executes, and the requested feature is observably exercised
- [ ] No Syncfusion licensing warning appears at runtime
- [ ] Console, terminal or device log is clean of missing-module, missing-asset and missing-endpoint errors
- [ ] Keyboard access, labels and focus behaviour work for what changed
- [ ] Empty, loading and error states behave, where relevant
- [ ] No key, secret or credential appears in the diff

If runtime verification is impossible in your environment, say so plainly and give the user a short
manual check. Do not describe unverified output as working.

## 9. Known failure modes for Vue

These are the mistakes agents make most often on this platform. Check them first.

- Vue feature modules are supplied through the component's `provide` option keyed by control name (`{ grid: [Page, Sort] }`), not via an Inject child. This shape is unique to Vue and is the most common source of broken Vue examples.
- Theme CSS must be imported.
- Nuxt requires client-side rendering for these components; wrap in `<ClientOnly>` or disable SSR for the route.

Troubleshooting order when a Vue Syncfusion implementation fails:

1. Framework and Syncfusion package version compatibility
2. Missing package, peer dependency, module, service, provider, handler or import
3. Theme CSS, fonts, scripts, static assets, or a required server-side endpoint
4. Data shape, identifiers, date and number parsing, async lifecycle
5. Feature-specific configuration in the installed component skill
6. Current official documentation, or an MCP lookup
7. A minimal reproduction with unrelated application code removed

Preserve the original error text. Distinguish a product defect from an integration or configuration
issue. If a minimal reproduction still fails against documented behaviour, that is a support case:
https://support.syncfusion.com/

## 10. Next

| Need | Go to |
| --- | --- |
| Full documentation | https://ej2.syncfusion.com/vue/documentation/introduction |
| Every skill in this pack | https://ai.syncfusion.com/vue/inventory.txt |
| Editor and viewer SDK skills | filter `inventory.txt` by `pdf-viewer-sdk-skills`, `docx-editor-sdk-skills`, `spreadsheet-editor-sdk-skills` |
| Skill catalog across all 18 packs | https://ai.syncfusion.com/skills/catalog.md |
| Curated, verified component template registry | https://ai.syncfusion.com/r/vue/registry.json |
| Licensing and trust boundaries | https://ai.syncfusion.com/licensing.md |
| MCP configuration | https://ai.syncfusion.com/mcp/llms.txt |
| Project scaffolding from the CLI | https://ai.syncfusion.com/cli.md |
| Another platform | https://ai.syncfusion.com/llms.txt |
| Support | https://support.syncfusion.com/ |