vue/compose-with-tanstack-devtools

Official

Wire Vue Table instances to TanStack Devtools

AuthorTanStack
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It enables developers to see live TanStack Table state and interactions in TanStack Devtools while building Vue datagrids, removing the guesswork of debugging table behavior.

Core Features & Use Cases

  • Mount the TanStack Devtools UI once per app and attach the Vue table adapter plugin so the devtools panel exists.
  • Register each Vue table instance via a composable to expose its state, columns, and model changes to the devtools UI.
  • Support multiple tables, naming, and per-table enabling so complex apps can selectively inspect the correct table(s) without noisy registrations.

Quick Start

Install the TanStack Devtools host and the Vue Table adapter, mount TanStackDevtools with tableDevtoolsPlugin() at the app root, then call useTanStackTableDevtools(table, "Users Table") inside script setup after each useTable call.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: vue/compose-with-tanstack-devtools
Download link: https://github.com/TanStack/table/archive/main.zip#vue-compose-with-tanstack-devtools

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.